I have been running the cycle plugin with success for a while, using 3 images, a caption, and a pager area (simple dots). I just added a fourth image/caption. the pager picks up the fourth image, adding a dot. However, it now fades in on transition, then immediately out. no other code changed other than the addition of a fourth image. why this is now malfunctioning?
View 1 Replies
I have the cycle plugin running, works fine on all but IE7 (not catering to IE6). The pager elements on the right do not appear in IE7. I have tried adjusting the z-index, etc., but can't figure it out.
Also, the caption text transitions in with bolded elements properly appearing, and then they flip to regular text (the whole line of text transitions a bit strangely).
I have re-styled the tabs of the pager with css so its not orange anymore. Instead the active and the inactive tabs have a background image. What I need to do now is remove the numbers, but I do not know how to. Can someone please tell me how to do so?
View 8 Replies View RelatedCan anyone recommend a way to add a nice scrolling effect to the pager nav? I am using the imagethumbnails example as shown, but if the number of thumbnails exceeds the width of my div, I would like them to nicely scroll into and out of view as the slideshow continues. Perhaps in conjuction with another jQuery plugin?
View 3 Replies View RelatedI'm using the cycle plugin to create a slideshow of highlights. So far I have the slides automatically fading between each other but I'd also like to have thumbnails that when hovered jumps the slideshow to the associated slide. Using pager and pagerEvent I can do this but I don't know how to use my own thumbnails for the pager.
View 2 Replies View RelatedI am using the awesome malsup cycle plugin, but it seems like the sync: true option isn't working 100% synchronous. If I activate the sync option and let exactly the same images fade, a short opacity effect occurs.
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
sync: true,
speed: 1000,
timeout: 4000
});});
<div class="slideshow">
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
</div>
I would like to fade some images with only few differences, and for the user it should look like only those few parts of the image change.
I have a href tag in my pager. When I click on it the slide changes to the ppropriate pager but the I don't get sent to the link even though allowPagerClickBubble is set to true. This works fine when pagerEvent is 'moveover' (as in the exaple posted here) ie. I get sent to the linked page. But it does not work when pagerEvent is the default 'click.cycle'.
View 11 Replies View RelatedI am having an odd error where the pager generates links but they don't change the slide in FF and Safari. The biggest surprise of all is that it actually works in IE. Here is the page I am referring to: http://76.12.208.222/
View 2 Replies View RelatedI am trying to make the jQuery Cycle Plugin - Auto-pager work, but it hasn't worked for me. The first image displays, but it just will not change and display the pagnition.
Here is my jQuery code:
HTML Code:
<script type="text/javascript" src="src/jquery.cycle.all.js"></script>
<script type="text/javascript" src="src/chili-1.7.pack.js"></script>
<script type="text/javascript" src="src/jquery.min.js"></script>
[Code]....
I need todo the following: (Fade imgs 1-17 then fadeZoom img 18 ) loop this
View 7 Replies View RelatedI'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]...
I need to try to get rid of the number (idx) that sits in the pager box. Ultimately I want to see all pager 'holders' as empty4px square boxes.
View 7 Replies View RelatedI'm building a jQuery cycle slideshow into a Wordpress post. The slideshow will cycle through images attached to the post, and the final slide will always be a text box (generated by a meta box).
I'm trying to build a Pager that would display numbers (as per default), but for the last slide, the pager button would simply be "Text".
e.g.
1 2 3 4 5 Text
I have explored PagerAnchorBuilder but am still struggling.
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....
<script>
$(document).ready(function() {
$('#cat_slide1').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '#next1', prev: '#prev1',
[Code]...
Using the minified jQuery Cycle Lite Plugin (only 3kb) is very very attractive for the project I'm working on. I'm trying to make cuts in load time and 99% of my site would only requires the fade transition, however one area needs the 'scrollUp' effect. How hard would it be to add that effect to the Lite version of the plugin?
View 2 Replies View RelatedI have a Cycle Plugin carousel of 20 product thumbs split into 4 slides of 5 thumb images each slide. This scrolls horizontally forwards and backwards with left/right navigation. This carousel is situated below the products being displayed. The user can navigate forwards and backward through these 4 slides, however, when they pick a product to look at the carousel always resets itself back to the first slide. How can I set it so that when an image in one of the 4 slides is clicked and we move to that product's page, that slide stays active when the page loads? It's annoying to have to scroll back through the 4 slides to find the one that had the active product on it.
View 17 Replies View RelatedI have this:
[Code]...
Is it possible to use enable different transition effects for auto- advance versus the pager (that is, when a user clicks a pager item)? I'd like very much to use "fade" as images auto-advance without user input, but use a more advanced easing effect if the user clicks an item in the pager.
View 1 Replies View RelatedI am using the jquery cycle plugin for a fade in/out content gallery for a site's news section - you can see it at: [URL] under the News & Articles section. The plugin works perfectly in Firefox, but I am seeing a white background in IE. Does anyone know how to fix this? It looks like it's an opacity issue. Here is my cycle code:
[Code]....
malsup has kindly created this progressbar but hasn't explained how to implement it into his cycle plugin. [URL] I am trying to get the progressbar to reset if the user clicks next/previous slide. what I am using:
[Code]....
I am working with MODx CMS. Following website: Carlindesign I integrated the cycle plugin on the home. It works but after the cycle is done the cycle call shows up instead of the next cycle.
View 2 Replies View RelatedI'm a bit new to jQuery but am loving it so far.. especially the cycle plugin. I have a strange problem that I've not been able to find the solution to anywhere else. Everything works just fine with the exception of one issue thats causing me problem. I'm using cycle to control 3 different fading animations on my page. On 2 of the animations I'd like to pause cycle after the image fades out for a few seconds but before cycle fades the next image in. The catch is that I want the timing to be different for each pause before the next cycle begins.
The goal is for#hpcontent,#hphead,#hpfade3to fade out all at the same time. Then for#hphead to pause for 2 seconds before it fades in the next random image, and#hpfade3to pause for 3 seconds before it fades in the next random image
[Code]...
I added maphilight to an html page. Suddenly, an unrelatedtable at the bottom of the page disappeared. The box is there, but the most of the table won't appear. Click on the bottom of the table, voila.Remove the jquery, it displays fine. The W3C validator OK's the file. Thisproblem is in IE8, not Firefox.
There are 3 wide lines that divide the data inthe 'missing' preformatted table. If I shorten the length of the 1stor 2nd line (the 3rd line doesn't affect it), it displays properly..[URL]But then I got it to display with minor changes to textabove the table. But then it wouldn't. I finally got[URL]to work and[URL] doesn't work. (edit: most of the time, both files don't always display consistently, even on different computers.) They are *exactly* the same file except for the time stamp in the file!
details: I deleted a couple of lines of text above the table and it displayed OK.When adding the internal #java anchorabove the table, that extra text changed how short the 2nd line needed to be to get the table to display. I had to remove about 6 characters from the 2nd line to get the table to show up again.
I'm customizing the cycle plugin a bit from [URL] , which slides through a number of items.The issue I have is selecting a child object, to get its 'alt' attribute, and display it as a description. Using the default example:
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.alt );
}
...works great when each item is an image. But I need to link each element, so my markup looks like this:
<div id="slideshow1" class="pics">
<a href="portfolio.html" title="Go to Project"><img src="tree.jpg" width="200" height="200" class="featuredimage" alt="Tree Branches" /></a>
[code]....
I'm not sure how to get the child element's alt attribute. I've searched through jQuery documentation and googled around, but can't get it working.
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??
downloaded and installed the cycle .jquery.cycle.all.2.74.js and jquery.cycle.min.js and set up the code like on the example:
<head>
<style type="text/css">
.slideshow { margin: 0px 50px 0px 0px;
width: 713px;
height: 478px;
position: relative;
[Code]...
I also found it worked better if I put the class styles in the head and not on a separate CSS file. Any thoughts to what's wrong?
