JQuery :: Cycle.js - Multiple Slideshows - And Timing - On Losing Window Focus

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


ADVERTISEMENT

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 View Related

JQuery :: Hash Values For Cycle Plugin With Multiple Slideshows On One Page

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

JQuery :: Preventing An Input From Losing Focus?

May 11, 2010

Basically I want to prevent a user from moving to another field if the current one is invalid (non-numeric).I've tried a few things that I though would do the job, I've also tried using the change event with the last line (resetting the focus to the current element) but no dice.

jQuery('.setupprice, .monthlyprice, .quantity','#config_dialog').live('focusout',function(e)
{
var val = parseFloat(jQuery(this).val());

[code].....

View 7 Replies View Related

JQuery :: Malsup Cycle Plugin Slide Timing

May 25, 2011

I need todo the following: (Fade imgs 1-17 then fadeZoom img 18 ) loop this

View 7 Replies View Related

JQuery :: Cycle Plugin - 4 Slideshows With Each Fading In Turn

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

JQuery :: Synchronized Cycle Slideshows With Pause On Hover

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

JQuery :: Cycle Timeout Function And Nested Slideshows?

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

JQuery :: Cycle Plugin - Hide Next And Prev Buttons With Several Slideshows?

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

Refilling Form Fields After Losing Mouse Focus

Sep 26, 2011

In my work here there is an application that has recently had a plugin coded up for it, the plugin allows custom message boxes to be opened up by the user when they roll on the help icons. The boxes open automatically and then close as soon as the mouse focus rolls off their box area. The boxes support java script content and html etc so can be very customised. I have coded a user form with various data capture fields. I would like the data in the fields to be reloaded if the user accidentally rolls off the box (as this will close it and the behavious cannot be changed :-<)

I have used cookies and tested in browser and all the retreival and storage of the cookie data works fine. Problem is with this plugin app is that i cannot fit in the call to 'onload CheckForCookies()' anywhere - The boxes do not seem to appear as 'window opening events' What is way of Adding the call to checkforcookies() into my form loading - that does not depend on a window opening event? There are four or five fields and i would like them all to update with whatever was last in them when the messagebox opens - it is not an api/ browser generated messge box, rather it is a custom web widget of some sort and i do not have access to the source code at this time.

It is equally important to be able to create or refresh the cookie data for the fields when the user rolls off the box so they do not lose whatever info was typed in so far so i need to call like 'onunload SetAllCookies' Like i say i have the code to do the work, the problem is the functions are not being called as the behaviour of the little boxes does not trigger them as load / unload eventrs. I tested using 'onfocus' and this works but is nbo good as the user would only see the data they had 'lost' when they click on a field.

View 2 Replies View Related

Multiple JS Slideshows In Body?

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

Multiple Slideshows On Index Page

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

Why In My Page Where Is Multiple Slideshows One Of Them Doesnt Work

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

How To Create Multiple Slideshows On Single Page

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

Multiple Belt Slideshows On HTML Page

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

Multiple MooTools Slideshows In Spry Tabs

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

Add/remove Multiple Input Type="file" Without Losing Value

Aug 7, 2005

example with <ol> as parent.

<script type="text/javascript"><!--
var gFiles = 0;
function addFile() {
var li = document.createElement('li');
li.setAttribute('id', 'file-' + gFiles);
li.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile('file-' + gFiles + '')" style="cursor:pointer;">Remove</span>'
document.getElementById('files-root').appendChild(li);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}
--></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<ol id="files-root">
<li><input type="file" name="file[]">
</ol>

example using table:

<script type="text/javascript"><!--
var gFiles = 0;
function addFile() {
var tr = document.createElement('tr');
tr.setAttribute('id', 'file-' + gFiles);
var td = document.createElement('td');
td.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile('file-' + gFiles + '')" style="cursor:pointer;">Remove</span>'
tr.appendChild(td);
document.getElementById('files-root').appendChild(tr);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}

--></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<table><tbody id="files-root">
<tr><td><input type="file" name="file[]"></td></tr>
</table>

I did the ol one first then he said he wanted it as a table for some reason.. so here they are..

View 2 Replies View Related

JQuery :: Cycle Plugin - Cycle Through Php Query_post & Display Caption From The_excerpt - Captions Do Not Effectively Cycle

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

JQuery :: Cycle Focus To First Form Element From Last Element & Vice Versa

Jul 26, 2010

I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. I have set up my jQuery script to index drop down menus and visible inputs, and uses that index to determine whether keydown of tab should move focus to the next element or the first element, and likewise with shift+tab keydown. However, instead of moving focus to the first element from the last element on tab keydown like I would like it to, it moves focus to the second element. How can I change it to cycle focus to the actual first and last elements? Here is a live link to my form: [URL]. Here is my script:

$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus

[Code]....

View 1 Replies View Related

JQuery :: Multiple Slide Shows Using Cycle?

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

JQuery :: Printing Multiple Slides With Cycle?

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

JQuery :: Cycle - Multiple Instances - One Will Not Display Captions

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

JQuery :: Cycle Plugin - Multiple DIVs Per Slide

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

JQuery :: Cycle Plugin: Controlling Multiple Cycles From The Same Pager?

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

JQuery :: Cycle Plugin - Multiple Containers On Same Page With Same Option

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

JQuery :: Cycle Plugin - Setup Multiple Containers With Same Options?

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







Copyrights 2005-15 www.BigResource.com, All rights reserved