JQuery :: Changing Cycle Slideshow To Not Autoplay
Aug 17, 2011
I am sort of new to jquery but have mucked around in it for drop down menus and simple autoplay slideshows. I am now working on a project I found using the cycle plug-in. How do I make this not autoplay? Would like this to be only user controlled with next/previous text/buttons. I am converting flash based flipbook [URL] into a jquery document using the cycle plugin with fade transition. It seems that making this not autoplay would be simple. Just unsure of how and where to do this. Here is what I have so far: [URL] Other questions that I have is can I put these images into CSS background like the slideshow that we use on our homepage? [URL]
I define a cycle in document.ready as per usual. In my cycle I have different sets of images that i want to cycle through and only want certain ones to cycle as selected using the slideExpr option.
Is there a way to change this option from:
SlideExpr: 'a'
To:
SlideExpr: 'b'
Another alternative i've considered is to make a cycle of cycles.
I'm using a simple fade slideshow of 5 images on my site's home page. This works fine in everything except IE6 and IE7. In these browsers, all of the images are displayed at the same time one right after another. The slideshow does not cycle...it is static images.
I want the slideshow to be in pause mode when the page loads. I can add a button to resume but can't figure out how to pause on load.I've tried several things. Here's the last attempt that didn't work.
I have a sideshow to add to a clients site, my plan is to utilise the cycle plugin (correct me if I'm wrong, a little new to all this). The critical aspect is that we have an image which should only be seen once, this being the very first image in the set, this will carry into the cycle/slideshow, but when it loops/repeats i want to skip past this first image.
I'm having trouble with the z-order in a slideshow made with cycle. Basically, my slides are an unordered list. Each list item is a slide with a background image, some text and a link. The relevant snippets of code are shown below.I have two absolutely positioned elements. One that is a div that goes around the entire <ul> that kind of frames the slide show. A second one is the link inside each <li>.The problem is that the link inside the <li> isn't clickable, even though it displays correctly.I think I have the z-index set correctly for all elements. If I turn off the slide show, it is clickable, suggesting I have it correct. If I remove the outside "frame" <div>, it is also clickable. It is only when they are both present, and the slide show is running, that the link becomes dead.
I have a pager turned on, but that doesn't affect this situation. I left it in, because it represents another absolutely positioned element that does work within the "frame".Both the pager and the frame are positioned above the slide.So, it seems something is happening when the slide show runs that I don't understand and is conflicting with elements it doesn't know about.Here's the code
I'm creating a slideshow using the Cycle plugin. I'm using Prev / Next options to trigger the transitions and also "alt" attribute to show some metadata on each slide. My question is: Can I use some other metadata to show captions with links in it? I followed [URL] to create this slideshow, but I can't see how to implement links on captions.
I'm using the jQuery Cycle plugin to build a slideshow that the main image is wrapped in an anchor and also has the thumbnailnavigation. I basically have the same code from the demo page of jQuery Cycle. Once I wrapped the images in a link the thumbnails broke. I have tried dropping the "slide.src" for $('#slideshow img).attr('src') but that still comes back as undefined.
I have been using jQuery cycle plugin for a banned with some content that fades in and out in a slideshow sort of thing but I would like to be able to div individually. Rather than saying all instances of #projects become a slide, i would like #project_img, #project_title and #project_description to all be separate, yet i want them all to be look like theyre in sync. I would also want the pause on hover to work for the entire parent div #projects so each div stops fading in/out.
My jQuery cycle slideshow was working beautifully before I tried to implement previous / next nav based on the demo at [URL]. I broke it doing something dumb. I am using images instead of text links, but that should not be an issue.
I would like user to be able to switch photos manually (with "next" and "previous" links ) or automatically, i.e., to have a link on the page that says "play slideshow" or something, then the slides switch automatically, like this guy has here, [URL] ("play" link in the middle switches photos automatically; he doesn't use cycle plugin, but I'd like to do this w/cycle plugin if possible..)
I'm interested in doing something with the Cycle plugin that's very similar to this:which is basically to have a slideshow that only runs when the mouse is over the div itscontained in. But--I'd like the slideshow to not only just run onmouseover, but also to not bevisible accept onmouseover: this way the div that contains the slideshow could have an altogether separate background image that is displayed when the slideshow isn't playing. If there's some kind of function that's built into the Cycle plugin that would achieve the sameeffect, that'd be even better
Is there a way to replace the first slide in a running slideshow such that it's shown only once?? I've been trying variations on something like this with no success. The element is replaced, but cycle doesn't show it.
function doBefore(){ var i = $(".slide").index(this); if (i == 1){
I'm creating a slider with the Cycle plugin and ran into a little bit of a road block.
What I want to do is simply have anchor links on my slideshow images, which I can get working just fine, except that when I add these anchor links, it removes my image caption (which worked prior to adding anchors on my images)
I am trying to adapt the addSlide demo 5 [URL] but instead of using buttons created by css I wish to use images.
So I'm largely okay with that, have found the #nav container and defined my background-image images but these are overwritten by textual digits and I'm not sure where these are generated from. Most likely something in my main.js file though I can't figure out what exactly. I'm using cycle as follows:
$(function() { var stack = []; // preload images into an array for (var i = 3; i < 5; i++) {
i'm having a small problem with getting the captions to display from a slideshow... i've got multiple slideshows on the page which i guess could be causing the problem... i'm not getting any errors, but no caption is being displayed... here is a section of my html....
I'm trying to get a next/previous arrow to float over the right/left edges of a slideshow div. I'm using to absolutely positioned divs to contain the next/previous buttons but for whatever reason they refuse to display above the slideshow div. Is there any way to get controllers to float over the cycle container?
Here's my code and if you give it a try you won't see the floating next/previous buttons unless you change the 'top' values for #next_btn and #prev_btn in the CSS to be greater than the height of the image (change to 410 to see them in my example):
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.
I have a page displaying a portfolio of logos, print pubs, websites, etc. When the page originally loads, all items are included in the slideshow. I would like only logo images displaying when the user places the mouse on the logos link.
Example here: [URL]
The jQuery call below works (i.e. the range of the images is limited to only those with class logos) if the menu link to "logos" gets a mouseenter event while the slideshow is showing one of the logo images (class="logos"). However, if the slideshow has progressed to one of the other sections (class="print", web, sign, etc) then the slideshow will not resume.
Below is the jQuery call when a user places their cursor on the logos menu link.
$("a.logos").mouseenter( function () { $('.slideshow').cycle('stop').cycle({ slideExpr: 'img.logos' }); $('.slideshow').cycle('resume');
I've successfully managed to implement the JQuery Cycle Plugin with the Shuffle Effect (works in all the latest version browsers) but I can't figure out how to change the direction of the effect. By default the images slide out to the left then back in again to the right (where they disappear beneath the next image). I'd like to change the direction to either. Out to the right, then back in to the left or a vertical variant. I've tried playing around with the animOut and animIn parameters but they seem to have a null effect.
I have to do a slideshow with images of different widths... am using cycle plugin, which I like very much... I have a little test slideshow here, http:[url]....it's not centering imgs in containing div (I made div width of widest image.. this will work for my situation, in which imgs will be hard-coded..)if you inspect img element in firebug (#slideshow img), it shows that the plugin adds a style of position: absolute; top: 0px; left: 0px .to the img; why does the plugin do this.. how can I center the images in containing div...
Iīve just launch my website-portfolio, well itīs not yet the final version but it is almost and despite I am satisfied with the final result Iīve detected a really strange bug that only happens sometimes. The thing is when the first introduction Slide appears (the one with the hand-made drawings), sometimes the images shrink from the normal size to small tiny images. This doesnīt happen always and if you refresh the page it disappears.
Follow the link to the page were the bug happens - [url]. I'm using jquery cycle plugin, check it out.
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:
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??
I am trying to write a script to display pictures. I have the following code which works OK for displaying the next or prior picture. I know there are plenty of scripts out there for this, but I want to do it myself. So, I'll worry about the pause/play later. I dont know how to write the image using javascript. My problem that I currently want to fix is the first picture displayed is not initialized; that is, the variable I guess. I am passing the directory name, which is this first function. So, I have to click NEXT or BACK (my buttons) to display the first picture (actually the 2nd)... Code:
So Im trying to create a slideshow with thumbnails the user can scroll through and use to navigate the slideshow. I'm a big fan of cycle so I wanted to use that as my main slideshow component and was planning on using jcarousel for the pager. So far it works great in Firefox, Chrome, and Safari, yet in IE the thumbnails are not loading. I'm guessing it has something to do with how the images in the pager are generated and then jcarousel just isnt proccessing that in IE but I 'm not sure. I feel like I'm very close to getting this slideshow to work, yet I need to figure out why it is failing in IE.
