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 RepliesI 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?
I've had a look at some pages that contains the Malsup's Cycle slideshow plugin with FIREFOX 4, any is working.
View 3 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'm trying to do a goto thing with the cycle plugin. I've succeeded with the same thing before. The only thing that happens now is that it goes to the first index/restarts.
$('#id').cycle(n); always gets me the first slide. I've checked that the n value is a number/integer. The only thing I can come up with is some kind of conflict.I'm also using jcarousel but when I deactivate that it's the same problem.
Does anybody have clue about what might be going on? Or maybe how to troubleshoot?
I need todo the following: (Fade imgs 1-17 then fadeZoom img 18 ) loop this
View 7 Replies View Relatedi'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 RelatedRegarding a previous post of mine: jquery-cycle-plugin-24-12-2010 I seem to have a problem using the Malsup Image Cycle where the images suddenly appear shrunken. It appears to only affect me when using ASP.NET with site.master pages the problem doesn't occur every time just occassionally. I tried recreating the glitch outside of ASP.NET (simply using HTML, CSS etc......) but it worked fine. I will soon try and recreate the problem in a sample ASP.NET project and post the code on this thread as soon as it's ready.
[Code]...
I am using the Cycle plugin with the turnLeft fx. After loading, the very first slide that transitions, doesn't actually "turn".It shrinks along the z-axis up to the upper left hand corner of the div. After that the transition "turns" correctly. It doesn't matter which slide it is, I have tried using the pager to select different slides in the list...as long as it is the very first transition, I have this problem.I tested the other "turn" fx's and turnRight shrinks up to the right hand corner, turnDown shrinks to the lower left hand corner, turnUp works just fine and does not have this first slide issue.I have this problem in all major browsers. I did notice that the jQuery Cycle homepage examples for the browser effects does not have this problem. Could there be anything I'm doing wrong? The call to Cycle is burieda bit in some other code but the call is pretty straight forward...the "options.imageFx" passed in is "turnLeft":[code]
View 5 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]....
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 View RelatedI'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):
<style>
#container {width: 500px;}
#container {position: relative;}
#next_btn {position:absolute; top:10px; right:5px;}
[Code]....
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).
This is what I have my slideshow set up
$(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 0,
[Code].....
Have cycle plugin implemented and it is functioning correctly except for the page quickly flashes the third slide before the rotation starts up.
I was able to assign opacity: 0 in the CSS for webkit and Firefox browsers that hides all three <LI>'s before it starts and that works. However, IE (even with filter: alpha(opacity=0);) won't take.
I tried using the cssBefore option but it throws an error when I try to put thefilter: alpha(opacity=0), into it.
Heres' the current code:
jQuery('.video-gallery').each(function() {
var holder = jQuery(this),
list = jQuery('.video-holder > ul', this),
switcher = jQuery('.items > ul', this),
[Code].....
The jQuery Cycle Plugin is very good, My site is usingit on the home page, the code is exactly as on the basic example here: [URL] The example above works very good in all browsers, except of Internet Explorer 9. In Internet explorer, for some reason, it just shows all pictures at the same time (please see the screenshot capture attached). I'm just wondering if anyone else has bumped into the same problem and if there is any way to fix it.
[Code]...
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 Relatedmalsup 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 having an issue with pausing the cycle from links within the cycle. I have set up a cycle that contains a html contentent including a 'video playlist'. This is a javascript based list that updates a flash video player with a new video inside the cycle. The videos are loading fine, but for some reason when i call the cycle 'pause', it dosent work? i have testing the $('#feature').cycle('pause'); from a link outside the cycle and that seems to be working, but it seems to be from the links inside the cycle content. here is the code i am using (i have made a custom crossfade transition)
function feature() {
$('#featuretitle').hide();
$('#feature').after(
'<div id="featurenav"></div>'
[Code]....
So, what I'm trying to do is embed links inside a cycle slide show. Here's an example:
[Code]...
As you can see, I'm using a div tag in place of an image and setting the image as the BG of the div. Then I'm overlaying some text and links on the "slide". When I click the links however, the result is animation invocation rather than link target invocation. The div click event is takingprecedenceover the link click event. Is there a built in handler in the Cycle library to handle this?
I'm using the Cycle plugin to display images for some of my past projects onhttp:[URL]..projekteMy problem is that in Chrome i get the above error in console.([cycle] terminating; zero elements found by selector) I have tried manually initializing the Cycle plugin for every project div and that did not help so I went back to my initial code:
[Code]...
I have seen that it is possible to combine two transitions in one cycle using a click. I would like to combine them directly after each other: a few shuffles and than a curtainX. For giving the feeling of shuffling a deck of cards and afterwards get one.
I tried this:
But the transitions are used random.
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.