jQuery "Text Content" Slideshow

Support for jQuery text content slideshows

jQuery Text Content Slideshow Setup
Support for Allwebco templates with jQuery text content slideshows. If you have this application, you should see a folder named JQuery-Content in your template download. Refer to the help.html included with your template download for the correct support links.

See Instead…
  • See links in sidebar on this page

jQuery text content slideshow example

Your text slideshow should look similar to the above.


Editing each slide
Edit the title and text for each slide in the "index.html" homepage. Click "visual" below.

jQuery visual

Edit the text and title for all 3 slides included in the "index.html" then open the page and click the next and back buttons to check your work.


jQuery files used
Files used on the slideshow page are located in the "JQuery-Content" folder. Some .css font code will be in the color theme .css files in the "colors" folder. Look for the section "HOMEPAGE LAYERED TEXT JQUERY".


Adjusting the height, width and layered location
Height, width and location of the "text content" slideshow can be adjusted by editing the style code in your css file in the "colors" folder.


Next / Prev button locations
Location of the arrow buttons can be adjusted by editing the style code in your css file. Look for the "JQUERY NEXT PREV BUTTONS" section.


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. Transitions are listed at the top of this file. Click "visual" below.

jQuery visual

Setting for auto play
You can set the text 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.

jQuery visual

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 text content slideshow colors and fonts are located in the color theme .css files in the "colors" folder. Additional css code is located in the style file "cycle-C-style.css" in the "JQuery-Content" folder. See also "The semi-transparent background" below.


Adding another slide
To add a new slide, copy the existing code for the last slide (slide #3) and paste it below itself (click visual below). In the new code edit the slide note "SLIDE 3" and also the "id" number id="Slide3" to the next slide number ("SLIDE 4" and id="Slide4").

jQuery visual

The semi-transparent background
The text content is layered over a large .jpg image but also includes a .png background between the text and .jpg image. This image is a semi-transparent .png file. A selection of these .png backgrounds are included in the "picts/shading" folder.

Example: To change to a different background:
  1. Look in the "picts/shading" folder to locate an available background. Example: "shade-black-50.png".
  2. In the colors folder open the css file for the color theme you are using. Example: "forest.css".
  3. In the css file (forest.css), search for png. Replace the image used with your new image name.

    Edit the following....

    background-image: url("../picts/shading/shade-forest-70.png");

    ...to this...

    background-image: url("../picts/shading/shade-black-50.png");

  4. Open the "index.html" and check that the shading has changed.
  5. Note: In addition to the colors used in the image names, the number is the opacity of the color. Example "shade-black-50.png" is a 50% black background. Higher numbers will be darker backgrounds.
  6. Note: Hosting is case sensitive so be sure to use all lowercase letters in the background image name.


Cycle Slideshow Tips & Issues

Loading speed tips
  • It is recommended that you not exceed about 15 total slides or about 1 meg if you total the byte count of all images in the slideshow.


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 "index.html" and/or the "JQuery-Content" folder.
  • Inspect your code to search for errors, or contact support.



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/