Help add Next/ Prev buttons to jQuery Cycle and Nextgen Plugin WordPress
- SOLVED
I am using the jQuery Cycle plugin with the Nextgen Gallery plugin on my wordpress blog. My problem is that I would like to have simple "Previous" and "Next" buttons below the slideshow that the user can use to advance. I understand that I need to use the "next" and "prev" options, but there will be multiple slideshows per page and I don't know how to make it work for each post on the blog.
Is there a way to make it so that each slideshow on the page acts independently of each other?
Thanks -
Jeremy
Answers (4)
Hai Bui answers:
Jeremy,
As the plugin generate the slideshow code from the shortcodes, we have to modify the plugin code (php) to get what you need. Is that an acceptable option for you?
Jeremy Parker comments:
Yes - please see my comment above with the code that I think needs to be changed.
Jeremy Parker comments:
Any thoughts on this, Hai?
Hai Bui comments:
Jeremy,
Here's the easiest working solution:
First, add the next and prev button manually with Visual Editor like you did before:
[slideshow id=1 w=900 h=600]
<br />
<div class="photonav">
<a id="prev" href="#">prev</a> <a id="next" href="#">next</a>
</div>
<p>
<br />
[slideshow id=2 w=900 h=600]
<br />
<div class="photonav">
<a id="prev" href="#">prev</a> <a id="next" href="#">next</a>
</div>
Second, go to http://jquery.malsup.com/cycle/download.html and get the jquery cycle files. Open src/jquery.cycle.lite.js , go to line 104 and replace:
if (opts.next)
$(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)});
if (opts.prev)
$(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)});
with
if (opts.next)
$cont.next(".photonav").children(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)});
if (opts.prev)
$cont.next(".photonav").children(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)});
Then rename it to jquery.cycle.lite.1.0.min.js and upload it to replace this file on your server: http://www.jparkerstudio.com/blog/wp-content/plugins/jj-nextgen-jquery-cycle/script/jquery.cycle.lite.1.0.min.js
Doing it this way, we can get what you want without editing the NextgenGallery plugin php code. If you want the nav buttons to be generated automatically, we must edit php code, which may be not good, because it will be replaced if you update Nextgen plugin (to new version) in the future.
Let me know if you have any problem using this solution.
Hai Bui comments:
I'm sorry there's a typo on my last message.
Second, go to http://jquery.malsup.com/cycle/download.html and get the jquery cycle files. Open src/jquery.cycle.lite.js , go to line 104 and replace:
if (opts.next)
$(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)});
if (opts.prev)
$(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)});
with
if (opts.next)
$cont.next(".photonav").children(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)});
if (opts.prev)
$cont.next(".photonav").children(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)});
Jeremy Parker comments:
Hai -
Thank you so much for your help. I did what you said, and, unfortunately, it didn't do anything. I put some test alerts in the code to make sure it was getting called, and it is not. I don't think that file is being used by the plugin.
However, it seems that the file that is being used by the plugin that is very similar is in nextgen-gallery/js/jquery.cycle.all.min.js. If I put an alert in there, it is triggered so I think this is where I need to make the changes. That being said, I found the following lines:
if(opts.next){$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}
and I changed them to:
if(opts.next){$cont.next(".photonav").children(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$cont.prev(".photonav").children(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}
But that made the buttons stop working completely. Please have a look at this page for the current version:
http://www.jparkerstudio.com/blog/slideshow/
Thank you!
Hai Bui comments:
Jeremy,
I'm sure that the last time I checked, the file was jquery.cycle.lite.1.0.min.js. But that does not matter, anyway.
In that js file (jquery.cycle.all.min.js), please replace the code you just modified:
if(opts.next){$cont.next(".photonav").children(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$cont.prev(".photonav").children(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}
with
tmpid=$('.ngg-slideshow').index($cont);if(opts.next){$(".photonav:eq("+tmpid+")").children(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(".photonav:eq("+tmpid+")").children(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}
It should work. Otherwise, please consider giving me FTP access so that I can make the change myself. This is not really a hard task but it's hard to explain and give instructions.
Jeremy Parker comments:
Hai -
I don't know why, but it's not working.
Can you give me your email address so that I can send you ftp information?
Thanks -
Jeremy
Hai Bui comments:
Jeremy,
My email address is [email protected]
Nilesh shiragave answers:
Hi
If you want image slideshow with next previous link then you can try this template from Wordpress nextgen plugin
http://nextgen-gallery.com/nggallery/page-235/page-2/
just pass template as carousel while calling the gallery inside your post.
[nggallery id=2 template=carousel images=7 ]
Jeremy Parker comments:
Unfortunately, I don't want thumbnails below my slideshow. All I want is the slideshow, and the words "Previous" and "Next" centered below it.
Vidyut Kale answers:
Instead of calling the jquery on the class, call it on id and class where each slideshow has its own id. Like in the example on the cycle light plugin demo page. Not writing the code here, the page explains it far better.
http://jquery.malsup.com/cycle/lite/
If your slideshows are getting auto-generated (very likely in wordpress) - attachments, or sticky posts, etc. Then you can generate the javascript in the loop itself if needed, thus using any ids that may be getting generated, though mostly you should be able to code it as a part of your js file.
Jeremy Parker comments:
This is more like what I'm looking for, and I have seen that example before. However, the slideshows are getting generated automatically. Here's how I'm creating a new slideshow when writing a post:
[ slideshow id=1 w=600 h=400 ]
That shortcode uses the plugin to generate the slideshow for me. I'm guessing I need to change the jquery plugin .js file a bit to do so.
Any ideas?
Jeremy Parker comments:
Okay, I just found out where the plugin is setting the next and prev parameters, but my knowledge of CSS and javascript aren't enough to figure out how to change them to point to the generated classname instead. Here's the code as it stands (The line of code that I'm talking about is found if you search for next:'#next', prev:'#prev' :
jQuery.fn.nggSlideshow=function(args){var defaults={id:1,width:320,height:240,fx:'fade',domain:'',timeout:5000};var s=jQuery.extend({},defaults,args);var obj=this.selector;var stack=[];var url=s.domain+'index.php?callback=json&api_key=true&format=json&method=gallery&id='+s.id;var stackLength=0;jQuery.getJSON(url,function(r){if(r.stat=="ok"){for(img in r.images){var photo=r.images[img];stack.push(decodeURI(photo['imageURL']));}
stackLength=stack.length;loadImage(1);}});function loadImage(num){if(stackLength>0&&num<=3){var img=new Image();img.src=stack.shift();stackLength--;jQuery(img).bind('load',function(){appendImage(img,num);});}}
function appendImage(img,num){jQuery(img).hide();jQuery(obj).append(imageResize(img,s.width,s.height));if(num==3||stackLength==0){startSlideshow();}else{loadImage(++num);}}
function startSlideshow(){jQuery(obj+'-loader').empty().remove();
jQuery(obj+' img:first').fadeIn(1000,function(){jQuery(obj).cycle({fx:s.fx,containerResize:1,fit:1,timeout:s.timeout,next:'#next', prev:'#prev',before:jCycle_onBefore});});}
function imageResize(img,maxWidth,maxHeight){if(!img.complete)
jQuery(img).bind('load',function(){imageResize(img,maxWidth,maxHeight)});if(img.height==0||img.width==0)
return img;var width,height;if(img.width*maxHeight>img.height*maxWidth){if(img.width>maxWidth){width=maxWidth;height=Math.round(img.height/img.width*maxWidth);}}else{if(img.height>maxHeight){height=maxHeight;width=Math.round(img.width/img.height*maxHeight);}}
jQuery(img).css({'height':height,'width':width});return img;};function jCycle_onBefore(curr,next,opts){if(opts.addSlide)
if(stackLength>0){var img=new Image();img.src=stack.shift();stackLength--;jQuery(img).bind('load',function(){opts.addSlide(imageResize(this,s.width,s.height));});}};}
Vidyut Kale comments:
you don't need to change either the jQuery or the plugin. Just the code like
$('#slideshow2').cycle({
prev: '#prev',
next: '#next',
timeout: 0
});
that you already add either to your footer or at the end of those files or as a separate file. Simply replace #slideshow2 with whatever your id is "#1-slideshow"? Whatever it is, and create many instances of this, with incrementing ids.
Vidyut Kale comments:
DON'T touch the plugin! Just add the selectors to apply it to with the javascript.
Try adding the script above with the IDs edited to match your slideshows and place the lot between the <script> tags in your footer. If it works, you can add them at the end of the file. Don't edit the jQuery!
Vidyut Kale comments:
Actually, I rarely bother with IDs for something like this, but I haven't used the prev and next. I just select the class and the code animates all the slideshows. It works. Are you sure it is not working for you? Can you provide a link to the failed sample? Would be easier to tell you the code if I could see it.
Jeremy Parker comments:
That's the thing - I don't add that code. All I do is use that shortcode that I mentioned above and it is generated for me. Therefore, I think the plugin code that generates that code needs to be changed to generate the next and prev links correctly.
Here is a page with two slideshows on it and a set of next and previous buttons. Notice that the buttons control BOTH slideshows rather than just one.
http://www.jparkerstudio.com/blog/slideshow/
Vidyut Kale comments:
Not automated, but *easiest way to fix this would be to wrap it in a div with an ID
<div id="slideshow1">
[ slideshow id=1 w=600 h=400 ]
</div>
<div id="slideshow2">
[ slideshow id=2 w=600 h=400 ]
</div>
... and so on.
Then, you edit the file jquery.jj_ngg_shuffle.js to
$('#slideshow1').cycle({
prev: '#prev',
next: '#next',
timeout: 0
});
$('#slideshow2').cycle({
prev: '#prev',
next: '#next',
timeout: 0
});
Jeremy Parker comments:
Thanks for that, but I will have a lot of slideshows and think that will be quite time-consuming to do every time I write a post.
Besides, my jj_ngg_shuffle.js file looks much more complicated than yours (I'm assuming that's because it's the plugin version instead of a standalone version):
(function($){
$.fn.jj_ngg_shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.jj_ngg_shuffle(items)) : this;
});
}
$.jj_ngg_shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
})(jQuery);
Vidyut Kale comments:
Have you tried this plugin?
http://nextgen-gallery.com/slideshow/nextgen-monoslideshow/
Jeremy Parker comments:
I did have a look at the plugin. Unfortunately, I don't like that the navigations buttons are part of the plugin. I really just want text buttons that sit below the slideshow.
Have you seen what Hai recommended below? It seems like we're on the right track there...
Sébastien | French WordpressDesigner answers:
Instead of
[ slideshow id=1 w=600 h=400 ]
try without id please
like that
[ slideshow w=600 h=400 ]
the plugincode is like in case of there is no id, id=$post->ID
Sébastien | French WordpressDesigner comments:
is this plugin ? : http://wordpress.org/extend/plugins/wordcycle/
Sébastien | French WordpressDesigner comments:
Have you insert a code in the header.php like that :
<script>
$('#identifiant').cycle({
prev: '#prev',
next: '#next',
timeout: 0
});
</script>
if that is the case, cut this code and paste it in the loop.php or in the index.php (if loop.php doesn't exist) after while ( have_posts() ) : the_post(); ?>
and replace
$('#identifiant').cycle({
by
$('<?php echo $post->ID ?>').cycle({
Jeremy Parker comments:
It doesn't work without the id set because that id refers to a Nextgen gallery id and needs to know that. I'm not using the wordcycle plugin, but that plugin seems to work exactly like the one I am using. I'm using the jQuery Cycle plugin for Nextgen Gallery.
I don't put any code anywhere - it is automatically generated for me by the plugin when I use the shortcode inside of my post.
Sébastien | French WordpressDesigner comments:
ok but where have you download the plugin "the jQuery Cycle plugin for Nextgen Gallery" please ?
Jeremy Parker comments:
http://wordpress.org/extend/plugins/jj-nextgen-jquery-cycle/
Sébastien | French WordpressDesigner comments:
In your case the problem is that id is always = 1
example :
jQuery("#ngg-slideshow-1-365-1").nggSlideshow( {id: <strong>1</strong>,
that's strange beacuse that perfect on my site. I have
jQuery("#ngg-slideshow-136-5-1").nggSlideshow( {id: 136
Jeremy Parker comments:
My ids were the same because I just copied and pasted the same shortcode twice because I only had one gallery at the time. I just uploaded another gallery and changed the shortcode so that they're both different. Unfortunately, the next button still controls both slideshows.
Here's the link:
http://www.jparkerstudio.com/blog/slideshow/
Also, if it helps, I think I found my answer, but I don't know what I need to change to implement it. Check out this link:
http://forum.jquery.com/topic/jquery-cycle-multiple-slideshows-targeted-by-class
Sébastien | French WordpressDesigner comments:
there is probably a conflict wuth another plugin.
If you can deactivate all plugin and just activate nextgen gallery and jquery-cycle and look if the problem exist yet.
I see that a plugin add this lines :
<script type='text/javascript' src='http://www.jparkerstudio.com/blog/wp-content/plugins/jj-nextgen-jquery-slider/script/jquery.nivo.slider.pack.js?ver=2.4'></script>
<script type='text/javascript' src='http://www.jparkerstudio.com/blog/wp-content/plugins/jj-nextgen-jquery-slider/script/jjnggutils.js?ver=3.0.4'></script>
deactivate this plugin
Sébastien | French WordpressDesigner comments:
ok !
How have you add next and prev, please ?
Jeremy Parker comments:
In this example, I just added it to the post itself. Here's the code for the post:
If you're seeing this, it is only a test page. Please ignore it.
[slideshow id=1 w=900 h=600]
<br />
<div class="photonav">
<a id="prev" href="#">prev</a> <a id="next" href="#">next</a>
</div>
<p>
<br />
[slideshow id=2 w=900 h=600]
<br />
<div class="photonav">
<a id="prev" href="#">prev</a> <a id="next" href="#">next</a>
</div>
Sébastien | French WordpressDesigner comments:
argh ! and you have write this in your visual editor, that's it ?
Jeremy Parker comments:
yes.
Sébastien | French WordpressDesigner comments:
that don't work like that !
:-))
Jeremy Parker comments:
Okay - so would you mind telling me what to do instead?