jQuery Cycle Slideshow Animation

Support for jQuery (non-responsive) slideshows

jQuery Slideshow Setup
Support for Allwebco templates with jQuery (non-responsive) slideshows. You should see a folder named JQuery-Cycle in your template download if your template includes this feature. Refer to the help.html included with your template download for the correct support links.

See Instead…

jQuery sample jQuery sample jQuery sample jQuery sample

Your slideshow should look similar to the above (slideshow may include buttons).


Download jQuery Cycle Allwebco Version AV1.1
This is a free add-on under the GPL license for free usage for personal or business websites without restrictions. Click below to download and follow the steps on the "JQuery-HELP-Cycle.html" to add this to any website or any website template.

jQuery cycle download Download jQuery Cycle Allwebco Version AV1.1 (.zip)

Can be used to replace the unlimited or single XML Flash image changer add-on.

Note: Download is non-responsive (See details below to make it responsive).


Updating an XML single or unlimited Flash changer
If you are replacing the XML changer add-on on your pages, you will want to remove the following line in the head section of your HTML pages where you added the changer:

<script language="JavaScript" type="text/javascript" src="XML-Changer-UL/FlashDetect.js"></script>

Note: In a very select number of templates you will not want to remove this line. If your header logo errors after you remove this line, then put the line back.

After you remove the above line, do the steps on the help page included with the jQuery Cycle slideshow and replace your XML changer code you originally added with the new code.


Re-sizing the slides
All slides need to be the same dimensions in the cycle slideshow. When re-sizing, you will need to edit code in the HTML page, usually the "index.html". Edit each image height and width, and also edit the "div" height and width just before the list of images. Click visual below to view code.

jQuery visual

Note: In some versions you may need to make the "div" height and width 2 pixels larger than the image sizes to allow for the css border.


Adding another slide
To add another image to the jQuery slideshow edit the html page the jQuery is on, in most cases the "index.html". Copy the last line of image code and paste it below itself. Edit the image name to the next image in sequence. Place the new image in the same folder with the other images in the code group. Click visual below to view code.

jQuery visual

Note: Although you can add as many images as you want, it is not advised to go over 1 meg total for all images combined. See "Loading Speed Tips" in the tips section.


Speed and transition options, the cycle-SETS.js
The "cycle-SETS.js" in the "JQuery-??" folder includes variables you can edit to change timing and transition types. Transitions are listed at the top of this file. For single slideshows only the "SET 1 OPTIONS" will be used. Click "visual" below.

jQuery visual

The "all" transition
To have the jQuery cycle slideshow randomly choose a transition type from all transitions after the initial fade-in set the following in the "cycle-SETS.js".

var set1type = 'all',       // TRANSITION TYPE (listed above)


Aligning the slideshow, left, right, center
In most cases edit the HTML page to change the alignment. For the add-on downloaded above, edit the following HTML code you added and change the class "center-JQS" to "left-JQS" or "right-JQS" to align the slideshow.

<div id="JQCycle1" class="JQslideshow center-JQS" style="width: 150px; height: 150px;">


Adding a link to each slide
Because the cycle slideshow is an "image only" slideshow normal links to pages can not be added, however, you can add links using a Javascript "onclick" event. Copy and paste the following code:


  onclick="javascript:location.href='about.htm'" style="cursor:pointer;"


...add the code above to each image you want to have a link like the following image #1 example with 1 space between the existing code and the code you are adding:


<img src="JQuery/imageJQ-1.jpg" width="500" height="333" onclick="javascript:location.href='about.htm'" style="cursor:pointer;">


Cycle Slideshow Tips & Issues
Loading speed tips
  • It is recommended that you not exceed about 20 images at 50kb each or a total of about 1.0 megs for the slideshow (ie: 10 images at 100kb each).
  • In the slideshow it is best to make the first image the smallest in byte count (simplest image) so it can buffer for subsequent images.
Dark image transparency issue
In cases where you are using very dark images in the slideshow, you may see flashes of light color areas between fades. To fix this, edit the "background-color: #F0F0F0;" to "background-color: #000000;" in the ".JQslideshow" class in the cycle-style.css.

Note: In some templates the jQuery background class may have another style name. Check the "HOME" section in your template .css file.

Menu layering problem
In older drop menu template models you may find the menus are layering underneath the jQuery slideshow. To solve this issue you will need to add a z-index:100; to the "menu.css" file. In the "colors" or "css" folder, open the color theme "***-menu.css" file you are using. Example: "blue-menu.css" and search for the word "absolute". "absolute" should appear only 1 time in this file for the class name "#menunav li ul". Add the following line of code as shown below highlighted in red:

Horizontal Style ***-menu.css
/* SUB LEVEL OUTER BORDER */

#menunav li ul {
	z-index: 100;
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	border: solid #000000;
	border-width: 1px 1px 1px 1px;
	/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
	margin: 0;
	}
Vertical Style menu.css
ul#top-nav li {
	position: relative;
	z-index: 100;
	list-style: none;
	}

Making the slideshow responsive
The jQuery download code from the link above on this page can be made to respond for mobile. It will not be dynamically responsive, meaning it will not dynamically respond to the browser width as it is narrowed or widened, however it will resize on the screen as the webpage is first loaded, or if the page is refreshed.

Steps to make it responsive
Using the files and help page from the jQuery download above:
  1. Change the first line in the "Add to HTML page" step from this:

    <div id="JQCycle1" class="JQslideshow center-JQS" style="width: 150px; height: 150px;">

    ...to this, editing the style...

    <div id="JQCycle1" class="JQslideshow center-JQS" style="max-width: 500px;">

    Edit the above with your image width.

  2. Remove the width="150" height="150" from each image in the "Add to HTML page" step (or Add to .js File step).

  3. Add the following to the "cycle-style.css" in the "JQuery-Cycle" folder. Add this code at the bottom.

    .JQslideshow, .JQslideshow img { width: 100%; height: auto; vertical-align: top; }


Troubleshooting
If you do the steps on the "JQuery-HELP-Cycle.html" and the slideshow is not working on your webpage, check the following:
  • The code from the "JQuery-HELP-Cycle.html" page in step #2 was not added to the <head> section in the page you added the slideshow to. Try re-doing the steps on the "JQuery-HELP-Cycle.html".
  • The "JQuery-Cycle" folder, or some of the files, or sub-folders inside the "JQuery-Cycle" folder were not copied over inside your website folder. Copy over the "JQuery-Cycle" folder again.
  • When the jQuery code was added, an existing line in your HTML page was removed that should not have been removed.
  • While editing you may have created an error in one of the jQuery files. Try the download again and re-copy over the files.
  • There may be a problem with one of your images. Try re-saving your .jpg images again with different save settings, or try the jQuery download again and copy over the default images to check.


JQuery-Cycle License
The "jQuery Cycle Plugin" is offered without restriction under the GPL license. This application can be freely used, modified, published, sold or distributed. See the following website for details and options for this application.

http://jquery.malsup.com/cycle/