Love the Cycle plugin.
- works as expected in that one photo fades into the next photo smoothly. Test page looks great - [url]
However, when I put the exact same code into Thesis/WordPress, I get a long delay between the images, and spend several seconds looking at a blank stage - [url]
Why would that be? How to make the images transition fade smoothly into the next image
I'm trying to add a fade-in and fade-out effect to the default scrollHorz transition.The code I'm currently using is as follows :
$('.Gallery').cycle({
speed: 1000,
timeout: 3500,
[code]....
I am using the Cycle plugin for image slideshows, and I am working on one that also displays a title for each slide with a link. The issue is that the title swaps a little after the image swaps, so there is a delay. Here is my code:
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
[code]....
I have just added a jQuery fade plugin onto a page to automatically cycle through images in an unordered list without a click event. It works well but when I preview the page with JS disabled all images become visible and it messes up the layout. What I need is a method that works when JS is disabled. I have seen methods where the {display:none} CSS styles are applied then changed via JS but can't figure this out. If anyone can either recommend a decent plugin with provisions for JS disabled browsers
View 2 Replies View RelatedI've been running this test cycle plugin slideshow now for over a week..[URL]..but starting today all of a sudden am getting this error in Firebug console: [cycle] unknown transition: scrollHorz ; slideshow terminating even if I switch to transition:'none' I get error: [cycle] unknown transition: none ; slideshow terminating I haven't changed anything, I don't get it[URL]..
View 2 Replies View RelatedI am new to jquery in anycase I have a db with information about the location of pictures, and I want to use that information to create a gallery with transition effects using the cycle plugin. Right now I can get the info that I need into the <img src=""/> using the code I have, the problem is it keeps giving empty values along with the actual values. To check what was happening I included a navigation bar for each picture and even though I should have 3 results in my query, I am getting 5 pages i.e. the extra ones are empty. I want to know if this problem is because of my php or something wrong I have done with the jquery.
The code I have is pretty simple.
<style type="text/css">
.slideshow { height: 210px; width: 210px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav a.activeSlide { background: #F90 }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.before('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pause: 1,
timeout:0,
pager: '#nav'
});});
</script></head><body>
<? $q = mysql_query("SELECT picture FROM gallery") or die (mysql_error()); while($row = mysql_fetch_array($q)){?>
<div class="slideshow">
<img src="gallery/<?=$row['picture'] ?>" <? } ?> width='200' height='200' />
</div>
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'm currently trying to create a complete custom transition for the awesome jQuery Cycle plugin. Basically, what I want to achieve is kind if a lightbox like transition effect... You know, the images wraper scales itself based on the current image width and height and scales itself again when you go to next or prev image.
Ok I have 2 questions:
1) I can see in the source of Cycle, at the end there is:
$.fn.cycle.transitions = { ... } and inside there is the fade transition set up. Do I need to create my new transition here?
[Code]...
The objective is to have an image fade to another one progressivly while the mouse is over, when its not it fades back to the original, whether or not it faded to the target completely or not. That is, if it takes 1 second to fade completely to the other image, and you take your mouse off it at 0.5 seconds, it will begin to fade back to the original. I have a problem where I want to give this ability to multiple images (thumbnails) on a page, without having reams and reams of code and instead just have one function accomadate any number of images.
[Code]...
I have a div, which I would like some images to rotate as the background-image so it is a slideshow. In additional, I want a fade in/out effect between the image transition.
View 3 Replies View RelatedI'm trying to change the background image of a button. Using the css() function changes the background instantly. Is there a way to do a crossfade effect?
[Code]...
The first script would be... on page load. Thus on load waite 5 seconds then swap an existing image to another by a fade transition. The second option or script would be onMouseOver fade image1 to image2 via a
fase transition. The mouse over action would be with a image graphics. At the same time changing the onMouseOver graphisc as well. The third script would be onClick (the image graphics) to fade transition image2 to image3. onMouseOut restore to image1 A second button graphics would be identical, but would change image2 to image4...etc
I'm using Cycle to transition multiple (8) images at one time. I want to fade in the first 8. In a slideshow where only 1 image displays at a time, the Cycle FAQ advises using the following code to fade in the first image:
$(function() {
$('#slideshow img:first').fadeIn(1000, function() {
$('#slideshow').cycle();
});
});
This doesn't work on IE or Firefox at all; it kind of works on Safari, in thatthe fade actually works. However, this seems to have also changed the behavior of the slideshow. For some of the cycles, instead of sliding the slides off the page, it hides the old slides and slides in the new ones.
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 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'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:
// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript:
<script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images:
<body onload="FadeAndCycleImages()">
Here is the code in the masterpage which references the cycling images:
<span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file.
I have two separate questions. One being, how would I go about having the container resizing itself for different image sizes. So that surrounding elements can conform to it's size?
Also, is there a way to align the images in a slide shows so that it is always horizontally and vertically centered in the slideshow?
Malsup's cycle plugin - can the image set being cycled through be changed on-the-fly? e.g. a user clicks on a thumbnail A and cycle shows A's images, clicks on thumbnail B and see B's images etc.
View 1 Replies View RelatedI am using the cycle plugin to vertically scroll images with text overlays on a WordPress homepage. I position a div with a semi-transparentbackgroundto darken behind the text The div style uses abackground-image with the -moz-linear-gradient and for IE it uses filter with the microsoft gradient. I thought it might be a problem but it actually works half the time. When a new slide appears and scrolls down the text background is completely transparent - through to the page background. The text over the background is also faintly visible. Once the new slide is in position however, the background and textappear as intended. The suprising point -while theslide is being removed the text and background display perfectly.
[Code]...
The only thing I can't figure out is how to create and use image pagers with slideshow images being clickable links as well. For example, view teslamotors.com. I see they use hero slideshow and drupal, is that something more auto generated by a back end ui? I tried reading through their source but its a little much for me. I have successfully setup images as pagers following: [url]
View 1 Replies View RelatedI've used the cycle plugin on several Wordpress sites and it works great, except that when I run it the background is visible between transitions. Instead of a smooth fade between images, there is a long pause between images. Even when I use the default values, there is still a noticeable delay between the slides.
$(document).ready(function() {
$('.slideshow').css("overflow", "hidden").cycle({
fx: 'fade', sync: 1, speed: 2000, timeout: 3000, delay: -2000,
});
});
The current site I am using the cycle plugin on is [URL]
Quite often, some images are displayed with much smaller sizes than what they should be. For example, an image with height 768px may be displayed with a height of about 100px. This problem is usually sovled by refreshing the page. The page may need to be refreshed more than once to get all the images to their correct sizes.
View 8 Replies View RelatedI am trying to combine the centering of the images. I get for the image title "undefined" If I remove the <div id="slide">...</div> the titles display normally.
jcycle code:
$(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... timeout: 5000, after: onAfter, next: '#slideshow', pause: 1 }); }); function onAfter() {
[Code]....
I'm testing out the cycle plugin, I wanted to have it so the slideshow would pause on hovering over both the pagination links and the image. With the below code right now only the bottom slideshow pauses on hovering over the links but does not pause on hovering over the images as the top slideshow does. I seem to be running into problems combining the two, can you take a look? I want to keep the previous and next links and for them to be functional also.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code]....
I didn't see this as an option, so I decided to give it a try on my own. I was able to add some lines of code (shown with the > in the margin below) to the jquery.cycle.js script to read in the width of each image and center the slide within the slideshow container // set position and zIndex on all the slides
View 2 Replies View RelatedI'm trying this Cycle Plugin, but whenever I load, lets say I have 5 images in the rotation pool, they all show up (briefly) whenever the page reloads, and then they dissapear (starting the rotation). Is there any way to avoid this? The images I'm using are 960 x 220, so it pretty much fills the screen before it hides.
View 5 Replies View Related