SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help calling functions from plugin

    Hi, 1st post here & I'm pretty new to JS & don't know much, but I've been dealing with using so many jquery plugins on web projects lately that I want to tweak in certain ways, so I'm just starting to learn basics. In the meantime, I've got this old carousel plugin (external js) I'm needing to use, wish I could use another carousel but they don't seem to work for what I'm doing. Problem is that the controls are very plain, just text & coded in the plugin. I want to take the functions that control previous & next actions, & get them into links that can work from my php file, & I don't want the prev & next links next to each other like they are in the plugin. But the way things are coded in this plugin I don't really understand how I would do this. Embarrassingly spent a few days trying to work this out to no avail.
    This is the section from the plugin that controls & has the generic back & forward buttons, there is pagination code in the plugin too but that is fine. Also here is the full plugin if needed https://github.com/richardscarrott/j...ry.carousel.js

    Code:
    insertNextPrevLinks: function() {
    this.prevLink = $('<a href="#" class="prev">Prev</a>')
    .bind('click.carousel', $.proxy(this, 'prevItem'))
    .appendTo(this.container);
    this.nextLink = $('<a href="#" class="next">Next</a>')
    .bind('click.carousel', $.proxy(this, 'nextItem'))
    .appendTo(this.container);
    },
    nextItem: function() {
    this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    prevItem: function() {
    this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    updateBtnStyles: function() {
    if (this.options.pagination) {
    this.paginationLinks
    .children('li')
    .removeClass('current')
    .eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
    .addClass('current');
    }
    
    if (this.options.nextPrevLinks) {
    this.nextLink
    .add(this.prevLink)
    .removeClass('disabled');
    if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
    this.nextLink.addClass('disabled');
    }
    else if (this.itemIndex === 0) {
    this.prevLink.addClass('disabled');
    }
    }
    },
    animate: function() {
    var nextItem, pos;
    // check whether there are enough items to animate to
    if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
    this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
    }
    if (this.itemIndex < 0) {
    this.itemIndex = 0; // go to first
    }
    nextItem = this.items.eq(this.itemIndex);
    pos = nextItem.position();
    
    if (headache) {
    this.runner
    .stop()
    .animate({left: -pos.left}, this.options.speed, this.options.easing);
    }
    else {
    this.mask
    .stop()
    .animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
    }
    this.updateBtnStyles();
    }
    };

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Welcome to the forums

    Quote Originally Posted by robx46 View Post
    I want to take the functions that control previous & next actions, & get them into links that can work from my php file, & I don't want the prev & next links next to each other like they are in the plugin. But the way things are coded in this plugin I don't really understand how I would do this.
    Couldn't you target them using the .prev and .next classes?

    Other than that, would it be possible to post a link to the page you are working on so we have a bit more to go on.

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Welcome to the forums



    Couldn't you target them using the .prev and .next classes?

    Other than that, would it be possible to post a link to the page you are working on so we have a bit more to go on.
    Thanks.
    Yes I thought I should be able to do that & I tried, but maybe in my inexperience I just didn't have the code done correctly. Here is one of the pages with the carousel...
    http://mcmcomm.net/newsite/work-mcm.php

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    So, in the demo you link to, the pagination links are below the slider and the "previous" and "next" links are beneath the pagination links.
    Could you maybe describe what you would like to change.

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    So, in the demo you link to, the pagination links are below the slider and the "previous" and "next" links are beneath the pagination links.
    Could you maybe describe what you would like to change.
    Yes I'm trying to create image based or rollover next/prev links in my php file that I'll probably put on the sides of the images, just can't seem to those prev/next calls to work from the php. I can't seem to even move those tiny text based links generated in the js plugin file, so I'd rather just delete those (keep the pagination cuz that is fine) then just call the prev/next through links in the php.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by robx46 View Post
    I can't seem to even move those tiny text based links generated in the js plugin file
    Well, let's start there.
    Add this to your CSS:

    Code CSS:
    .next, .prev{
      position: relative;
      top:50px;
    }

    Not exactly exciting stuff, but as you see, you can quite easily target them via CSS to apply whichever styles you want (including background-image for a rollover effect).

  7. #7
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Well, let's start there.
    Add this to your CSS:

    Code CSS:
    .next, .prev{
      position: relative;
      top:50px;
    }

    Not exactly exciting stuff, but as you see, you can quite easily target them via CSS to apply whichever styles you want (including background-image for a rollover effect).
    I think I tried something similar a few days back & had no luck, but maybe I didn't code something right. Using CSS like you say, I did get things the way I wanted. I don't know if this is the optimal way I could of done this, but it works. Added this to the styles...
    Code:
    .prev{
    	position: relative;
    	top: -220px;
    	left:-40px;
    }
    
    .next{
      position: relative;
      top:-220px;
      left:710px;
    }
    Then I made changes in the plugin js file as well. Instead of where the text was to make the links like before, I just put my image tags in place of that, with some styling for sizing...
    Code:
    insertNextPrevLinks: function() {
    this.prevLink = $('<a href="#" class="prev"><img src="images/arrow-left.png" width="14" height="18"></a>')
    .bind('click.carousel', $.proxy(this, 'prevItem'))
    .appendTo(this.container);
    this.nextLink = $('<a href="#" class="next"><img src="images/arrow-right.png" width="14" height="18"></a>')
    .bind('click.carousel', $.proxy(this, 'nextItem'))
    .appendTo(this.container);
    },
    & here is the result...
    http://mcmcomm.net/newsite/clients-mcm.php

    I'm not sure if I could of got rollover images working with this method but I didn't try because I don't think they asked for them.
    Anyhow, thanks so much for helping & pointing me in the right direction on this.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    The slider looks much better now - well done!
    If you wanted to have any kind of rollover effect on the image, I would use a background-image on the links, then target .prev:hover and .next:hover.

    Thanks for taking the time to report back


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •