JQuery :: Cycle - Multiple Slideshows Targeted By Class?
Aug 16, 2010
I'm trying to set up a blog, which uses a slideshow within each post, using the jQuery Cycle plugin.
Is there a way of creating separate slide shows for each, using a single class (.post-slideshow-images) - and also have the next and prev links on each, and a caption? Let's say there are 5 instances of slideshows with the class.post-slideshow-images.I've tried the below, but the next and prev links, and the caption are linked between each slideshow (clicking next on one, for instance, controls every instance on the page, and the caption for every slideshow also updates)
$(document).ready(function(){
$('.post-slideshow-images').cycle({fx: 'scrollLeft',timeout: 0,next: '.next',prev: '.prev',
[Code].....
View 5 Replies
ADVERTISEMENT
Nov 14, 2011
I've used the fantastic Cycle plugin on a couple of projects now, and it's worked really well.
I have four elements that use cycle, and I've used the timeout and delay options to have one box after another flip repeatedly.
This works well, so the first slide flips after 1 second, the second after 2 and so on, and then each slide continues to flip in turn.
Unfortunately, when I move to another browser tab or another window, then move back, returning focus to the window with the flip elements, the timing seems to go wrong. Each slide continues flipping, but they're no longer flipping one at a time.
My code runs as follows:
I'd like to see each one continue flipping in turn when I go back to the first tab.
View 2 Replies
View Related
Jul 14, 2011
I'm a javascript rookie trying to figure out a way to get bookmarkable URLS for the images on a single page with multiple slideshows. I must admit I don't really understand the first part of the code on the Cycle demo page for this, which only works for a page with one slideshow:
While I'm shopping for a little guidance, it would also be really cool if the hash tags were semantic somehow with respect to each slideshow e.g.:
[url]
[url]
[url]
View 2 Replies
View Related
Oct 5, 2010
I've got 4 parallel slideshows (see below) that each contain 3 images. I would like the slideshow 1 to fade first, then slideshow 3, then 2, then 4. I have no problem with making all 4 slideshows work at the same time but I can't make them alternate. I've been trying to use "after:" as a callback to trigger the next slideshow but every time I put in some more code the whole thing stops working !!
Code :
<script type="text/javascript">
<!-- $(document).ready(
function() {
$('.slideshow')
.cycle({fx: 'fade',timeout: 5000})
.cycle('stop');});
// I was trying to call this function after starting #slide-1 but I gave up !!
function nextImage1() {
$('#slide-1').cycle({fx: 'fade',timeout: 5000,after: nextImage3 });
}
-->
</script>
<div id="diaporama">
<div id="slide-1" class="slideshow">
<img src="images/diapo_1_1.jpg" width="240" height="171" />
<img src="images/diapo_1_2.jpg" width="240" height="171" />
<img src="images/diapo_1_3.jpg" width="240" height="171" />
</div><div id="slide-2" class="slideshow">
<img src="images/diapo_2_1.jpg" width="240" height="171" />
<img src="images/diapo_2_2.jpg" width="240" height="171" />
<img src="images/diapo_2_3.jpg" width="240" height="171" />
</div><div id="slide-3" class="slideshow">
<img src="images/diapo_3_1.jpg" width="240" height="171" />
<img src="images/diapo_3_2.jpg" width="240" height="171" />
<img src="images/diapo_3_3.jpg" width="240" height="171" />
</div><div id="slide-4" class="slideshow">
<img src="images/diapo_4_1.jpg" width="240" height="171" />
<img src="images/diapo_4_2.jpg" width="240" height="171" />
<img src="images/diapo_4_3.jpg" width="240" height="171" />
</div></div><!-- end diaporama -->
View 8 Replies
View Related
Feb 7, 2011
How to have synchronized Cycle slideshows with pause on hover (for the hovered slideshow only). I have several Cycle slideshows on a webpage and am synchronizing them using a setTimeout() that basically issues cycle('next') to all the slideshows at a set interval. See Synchronized Demo. At first I tried setting the pause:true option (to pause the hovered slideshow) and expected the hovered slideshow to ignore the cycle('next') command. The 'next' command was processed regardless of pause:true. As a work-around, I modified the nextSlide() function to not issue a 'next' command to the hovered slideshow. FYI, the cyclePause property of a slideshow is non-zero during hover.
The modifications to the above mentioned demo are shown below in red:
$(function() {
var $slideShows = $('#s1,#s2').cycle({
timeout: 0, // disable automatic transitions
pause: true,
});
setTimeout(nextSlide, 4000);
function nextSlide() {
// advance both shows to next slide
$slideShows.filter( function() { return ! this.cyclePause } )
.cycle('next');
setTimeout(nextSlide, 4000);
}});
This solution directly access the slideshow's cyclePause property. It could be written cleaner if cycle() offered a way of testing a slideshow's hover state, such as a new command: cycle('ishover') returning true if hovering.
View 1 Replies
View Related
Jul 15, 2011
Cycle will handle variable timeouts, and it will handle nested slideshows, but I can't find any code for variable timeouts within nested slideshows. I've tried cobbling together a fix, but it didn't work (don't ask me to explain...it's embarrassing).
how to mate the script for variable timeouts with the code for nested slideshows?
View 2 Replies
View Related
Jan 26, 2011
I am using the jQuery cycle plugin for several slideshows at the same time in Drupal. The problem is when there is only one image in a slideshow, then I want the "prev" and "next" buttons to be hidden away. I can get:
Drupal.behaviors.image_slider = function (context) {
$('#block-views-work-block_1 .views-field-field-work-images-fid .field-content').each(function(i) {
$(this).after('<div class="slide-pager"').cycle({
fx: 'scrollHorz',
speed: 500,
timeout: 0,
nowrap: 1,
sync: 1,
easing: 'easeInOutQuint',
activePagerClass: 'active-slide',
pager: $('.slide-pager').eq(i),
prev: $('.prev').eq(i),
next: $('.next').eq(i),
after: function (curr,next,opts) {
$('.caption').eq(i).html(this.alt);
var msg = (opts.currSlide + 1) + ' av ' + opts.slideCount;
$('.msg').eq(i).html(msg);
}});
});
};
View 4 Replies
View Related
Oct 15, 2009
I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this [URL] code, but trying to have several slideshows on the page. I have set up two to test it, and one works while the other just displays a static image. What is the best way to do this? Do I need to repeat the script code in the head?
View 3 Replies
View Related
Jul 26, 2006
I want to use the same Photoslider II code but for three different slideshows on same index page. The problem is one works fine but when I add another one on same page everything gets screwed up. The code is below but how can I make adjustments so each one works independently? Code:
View 1 Replies
View Related
Sep 19, 2011
Here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together
Here is my script:
View 4 Replies
View Related
Aug 17, 2011
I am having trouble creating two slideshows on a single page. I know that there is a problem of one slideshow overriding the other, but I can't figure out what to change or where in order to make both functional. I've seen other posts related to this, but those I've tried don't work for me. Here's my partial code...I only included the parts I think are necessary.
<script language="JavaScript1.1">
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
} } .....
View 1 Replies
View Related
Dec 13, 2011
I have this javascript for a slideshow and I want to have in my html page multiple slideshows which can play in parallel the same time.
My script is :
Code:
<script type="text/javascript">
* Conveyor belt slideshow script- " Dynamic Drive DHTML code library [URL]
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [URL] for full source code
//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3 .....
View 4 Replies
View Related
Dec 15, 2011
I am having trouble with my MooTools Slideshow. I have a page with 4 Spry tabs and 3 of them have slideshows. I've set up the page for multiple slideshows, but only the first tab works correctly.
These are 2 issues I'm having:
1. The thumbnails work properly for the first tab, but for the other tabs they seem to stack upon one another and flutter when you mouseover.
2. When you switch to a different tab, you get a smaller photo artifact for a couple of seconds in the right corner of the slideshow screen (I have a feeling this will go away when #1 is resolved).
Here is where the website can be viewed: [url]
I was these 2 bits of help from another forum:
The issue is probably that slideshow can't calculate dimensions properly when it is hidden. It's really a general issue with javascript/DOM-manipulation: when an element is set as display:none - like the hidden tabs - nodes inside of them have no height/width. The workaround would be to initialize each slideshow once the tab is visible.
Do not initiate all slideshows at once, initiate them when the tab comes into focus, destroy them/pause them when a tab loses focus. I don't know how to initiate the slideshow on tab focus.
View 1 Replies
View Related
Dec 15, 2010
I am using the cycle plugin. I am cycling through 3 images. There are 3 corresponding divs below the images.I would like to change the background color of the div based on the corresponding image that is active.
[Code]...
View 1 Replies
View Related
May 26, 2011
I'm trying to do something with this great plugin. I have the following code:
<div id="slideshow">
<img src="projekt-1-1.jpg" class="album0" />
<img src="projekt-1-2.jpg" class="album0" />
<img src="projekt-1-3.jpg" class="album0" />
[Code]....
I would like to use the fade effect when it goes from a img to the next img with the same class instead when the next img has a different class I want it to apply thescrollLeft effect.
What I have problem to understand is how can I on a certain condition change the effect of the cycle.
View 2 Replies
View Related
Jul 20, 2010
I'm using the cycle plug-in with an existing nav bar (2 buttons). It functions correctly -- but for some reason -- I can't get the corresponding nav button to change CSS class and show as highlighted.
jQuery:
$(document).ready(function() {
$('#slideShow').cycle({
fx: 'fade',
[Code]....
View 1 Replies
View Related
Jun 23, 2011
I have yet to be able to do this successfully. I am using the Cycle Plugin to cycle through a series of images and corresponding caption. To show the images, I use:
<div id="cycle-container">
<?php query_posts("cat=38&showposts=2"); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="http://www.website.com/uploads/<?php echo get_post_meta($post->ID, 'Image', true); ?>" alt="Icon [Code]...
Problem: The captions do not effectively cycle. What appears is the first caption from php the_excerpt but it does not change to the next php the_excerpt text. Can I solve this problem so I get the text from php the_excerpt to correspond to each image??
View 1 Replies
View Related
Sep 28, 2010
This is what I have my slideshow set up
$(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 0,
[Code].....
View 6 Replies
View Related
Oct 7, 2009
I was hoping someone could lend a hand with a problem I've been having in the office for just over a day now. I'm using Jquery cycle plugin [URL].. to slide between about 10 slides worth of information.
The beauty of Jquery cycle allows me to make a slideshow of only the Divs I have specified as "cycle" class. My problem is that I would love to be able to print each one of the "cycle" class slides using only one print function click.
[Code]...
View 1 Replies
View Related
Sep 9, 2011
Have two Instances - One will not display captions. Here are the script pieces for the two.
[Code]....
View 1 Replies
View Related
Sep 21, 2010
I've been using the jQuery Cycle Plugin now for a variety of clients and feel pretty comfortable with implementing it and how it works. I rarely have any difficulties and it always seems to shave time off my projects. Its really is an awesome plugin that I am extremely grateful for. That being said I'm having a little difficulty with a more involved implementation on a personal project. [URL]. The plugin is working correctly - but not ideally.
Each image and title you see is a callout for a blog post. The posts are automatically added by calling the WordPress theme's "loop" - a PHP function loading the information and images from the last several posts written - then it displays each post's featured images, titles, and other info inside divs labeled "post". Afterward, the jQuery cycle plugin uses all the "post" div's to create a great user-interactive recent blog-post slider - using (my favorite) vertScroll effects.
What I'm looking for is a way to display 2-3 posts at a time instead of just 1. I've seen people have 2-3 images displaying per scroll by adding two-three images into a div - and then having that div (with more divs) cycle. What prevents me from doing something like that here is the fact that the list of blog-posts is dynamically populated by PHP. There isn't a way (I know of) to insert a </div> after 2-3 posts and then open a new <div> for the next 2-3 so that the cycle plugin knows where to stop the scroll content.
View 4 Replies
View Related
Apr 15, 2010
I've got two sections of my page that I want to remain in sync as they cycle. I think I'm 95% of the way there, but I just can't quite get it to work. The #slideshow cycle works perfectly, as does the pager, but the #descriptions cycle behaves oddly. It hasn't been completely consistent, but usually it'll cycle after the 2nd slide, then never cycle again. This is the case whether or not I click the pager to #2 then back to #1 or if I just let it cycle.
[Code]...
View 6 Replies
View Related
Jul 17, 2011
Using Jquery Cycle Plugin i have multiple containers on the same page. they have a next and prev button. the problem is, when i click the next button it will cause the containers on the pageadvance simultaneously, same goes for the previous button. it works fine when i click just on the images (they will go to the next image) but not with the prev. and next. button. i know i have to add some kind of var. to it. and i tried it but with no luck.
Here is my code.
$('div[id^=slide]').each(function(index) {
$('#slide'+ (index+1)).cycle({
fx: 'fade',
speed: 'fast',
[Code].....
View 1 Replies
View Related
Sep 6, 2007
Playing with the wonderful Cycle plugin. Rather than using container ID's and having specific options for each, I want to use the same settings for multiple containers of the same class. In other words, rather than:
$('div#containerName').cycle({
fx: 'scrollHorz',
speed: 'slow',
timeout: 0,
[code]....
View 5 Replies
View Related
Nov 3, 2011
With jQuery cycle, is it possible to have more than one slide in the viewable area, and scroll one at a time? For example, assume that each letter below is a slide, and the viewable area is in [brackets] at load time:
[Code]...
View 1 Replies
View Related
Apr 28, 2011
I have a div with a height of 100 pixels.If the content is too much to fit in div, I want to show a 'Read More' link at the bottom.If you then click 'Read More', the div expands to full height so all the content can be seen and the link text changes to 'Read Less'.If you then click 'Read Less', the div contracts back to 100 pixels.I've found solutions that can handle the above situation, but I want to have multiple divs with the same class that all work independantly of each other.So I'd have the following HTML
[code]
<div class="openclose">
...some content...
[code]....
View 3 Replies
View Related
