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.
Here's my site: [url]
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]
View 1 Replies View RelatedI 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.
$(document).ready(function() {
$('.media-slideshow').cycle({
fx: 'fade',
[code]....
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.
[Code]...
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
<script type="text/javascript">
$(document).ready(function() {
$('.slides').before('<div class="pager">').cycle({
[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.
View 1 Replies View RelatedI'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.
$('#slideshow').before('<ul id="slideshow-nav">').cycle({
fx: 'fade',
speed: 'slow',
[code]....
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.
View 1 Replies View RelatedMy 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.
Here's the script:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 300,
timeout: 0,
prev: 'navprev',
next: 'navnext'
after: function() {
$('#caption').html(this.alt); .....
Small (1px) white dots appear during the transitions in the JPG images I'm using in the slideshow here:[URL]..
I've tried using:
cleartype:!$
.support.opacity,
and
cleartype: true,
But it's not working. I've tested in IE6, 7 and 8, and it's happening in all three.
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..)
View 4 Replies View RelatedI'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
View 5 Replies View RelatedIs 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){
[Code]....
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)
[Code]...
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++) {
[Code].....
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]...
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):
<style>
#container {width: 500px;}
#container {position: relative;}
#next_btn {position:absolute; top:10px; right:5px;}
[Code]....
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...
View 1 Replies View RelatedIī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:
<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??
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.
[Code]...
I am using a simple prototype slideshow and a more comprehensive jquery slideshow on my website.When these are used on the same webpage on my website there appears to be a collision: (For example)Code:element.attachEvent is not a function[Break on this error] element.attachEvent("on" + actualEventName, responder); How can I avoid the conflict without reverting to a new slideshow?
View 1 Replies View RelatedI 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 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 Related