jQuery Content Slideshow

Support for jQuery content text/image slideshows

Editing each slide
Replace the images in the "slideshows" folder. Edit the title and text for each slide in the "slideshow?.htm" pages. Click "visual" below.



jQuery files used
Files used for the slideshow are located in the "JQuery-Content" folder. Css font and colors code will be in the "style.css", or in color theme .css files in the "colors" folder in the "JQUERY CONTENT SLIDESHOWS" section. Images in the slideshow will be located in the "slideshows" folder.


Adjusting the height and width
Height and width of the content slideshow can be adjusted by editing the following code in the "slideshow?.htm" pages (also see visual above):

<div id="JQContent1" class="JQDiv center-div td-center" style="width: 98%; height: 510px;">


Next / Prev button locations
Location of the arrow buttons can be adjusted by editing the following code in the "slideshow?.htm" pages in the "NEXT PREV BUTTONS" section (also see visual above):

<div id="NextPrev" style="position: relative; left: -240px; top: 369px;">


The cycle-C-SETS.js transitions and options
The "cycle-C-SETS.js" in the "JQuery-Content" folder includes variables you can edit to change timing and transition types and number button location to before or after. Transitions are listed at the top of this file. Click "visual" below.



Setting for auto play
You can set the slideshow to auto play the slides. Edit the "cycle-C-SETS.js" in the "JQuery-Content" folder. Edit the "timeout: 0," variable from 0 to 1000 for each second of delay you need. Edit each of the 4 "CONTENT" sets, if required, for the additional slideshows beyond the 1st. Click "visual" below.



Note: The "cycle-C-SETS.js" includes 4 or more "sets" of code. You may need to edit the top "set" or possibly all of the sets for the auto play.


CSS code for borders, backgrounds, padding, fonts
Codes for the content slideshow colors and fonts are located in the "style.css", or in the color theme .css files in the "colors" folder. Additional padding alignment and background colors are located in the file "cycle-C-style.css" in the "JQuery-Content" folder.



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
Using fade transition only: 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: transparent;" to "background-color: #000000;" in the ".JQC-image" class.

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;
	}

Troubleshooting
If the slideshow is not working on your webpage, check the following:

• While editing you may have created an error in one of the jQuery files or html pages. You can request a new download for a new copy of the slideshow pages and the "JQuery-Content" folder.
• There may be a problem with one of your images. Try re-saving your .jpg images again with different save settings.

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/