Converting jQuery Cycle slideshow to jQuery Cycle2

I am trying to convert an existing jQuery Cycle slideshow with page anchors to jQuery Cycle2. I keep getting caught up on converting the Javascript that currently resides in the HTML page:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#nav li:eq(' + idx + ') a';
</script>
Any ideas?

Cycle2 is completely different from the older Cycle plugin. C2 uses the latest jQuery core library and HTML5 data attributes to invoke the plugin's features. The function codes you have there won't work. I would recommend starting over with a plain, blank HTML5 document. The code below contains Cycle2 Carousel with Fancybox.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5, Cycle2 Carousel with Fancybox Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
    box-sizing: border-box;
aside {
    float: left;
    width: 25%;
    border-right: 1px solid #666;
    padding: 2%;
section {
    float: left;
    width: 75%;
    padding: 2%;
.slideshow img { border: 4px solid #999; }
/* slideshow pager */
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: relative;
    top: 0;
.cycle-pager span {
    font-family: arial;
    font-size: 75px;
    width: 22px;
    height: 22px;
    display: inline-block;
    color: #ddd;
    cursor: pointer;
.cycle-pager span.cycle-pager-active { color: #09C; }
.cycle-pager > * { cursor: pointer; }
</style>
</head>
<body>
<header> <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slider with <a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer</h1>
</header>
<aside>
<h2>Left Aside</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.
Aenean tristique enim ut ante dignissim.</p>
</aside>
<section>
<h2>Section</h2>

<div class="slideshow"
data-cycle-pause-on-hover="true"
data-cycle-fx="carousel"
data-cycle-timeout="2000"
data-cycle-pager="#pager"
data-cycle-carousel-visible="5"
data-cycle-carousel-fluid="true"
data-cycle-slides="> a"
>

<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 1" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 2" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 3" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 4" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 5" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 6" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 7" /></a>

</div>

<div class="cycle-pager" id="pager">

</div>
</section>

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>

<script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
    </script>
</body>
</html>
Nancy O.

Similar Messages

Dreamweaver CC, jquery cycle2 pagers

I tried to use the code from cycle2 pagers for portfolio slide show,
it did not display like the sample
Anyone please help me.
below is the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.cycle2.pager.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.pager.min.js"></script>
<link href="page.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="cycle-slideshow"
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template=""
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<div id=no-template-pager class="cycle-pager external">
    
    <img src="http://malsup.github.io/images/p1.jpg" width=20 height=20>
    <img src="http://malsup.github.io/images/p2.jpg" width=20 height=20>
    <img src="http://malsup.github.io/images/p3.jpg" width=20 height=20>
    <img src="http://malsup.github.io/images/p4.jpg" width=20 height=20>
</div>
</body>
</html>

Thank you.
I followed your suggestion, and the slider, thumbnail work well, just like the example.
And I hope that I am doing the right way.
THIS IS MY HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Don Freeman Photography</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<style type="text/css">@import url("new5styles.css");</style>
</head>
<body>
<div id="container">
<div id="wrapper">
    <div id="banner"><img src="images/df-logo.jpg" width="520" height="120" alt="logo"></div>
        <div id="menubar">
<nav><ul>
    <li><a href="index.html"><span class="currentLink">MAIN</span></a></li>
    <li><a href="interiors.html">INTERIORS</a></li>
    <li><a href="stilllife.html">STILL LIFE</a></li>
    <li><a href="people.html">PEOPLE</a></li>
<li><a href="travel.html">TRAVEL</a></li>
<li><a href="blackwhite.html">BLACK & WHITE</a></li>
<li><a href="video.html">VIDEO</a></li>
<li><a href="books.html">BOOKS</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul></nav></div>
</div>
    <div id="middle">
    <div id="boxleft"></div>
    <div class="cycle-slideshow"
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template="">
    <img src="images/main1.jpg" width="1350" height="449" alt="mainimage1">
    <img src="images/main2.jpg" width="1350" height="449" alt="mainimage2">
    <img src="images/main3.jpg" width="1350" height="449" alt="mainimage3">
    <img src="images/main4.jpg" width="1350" height="449" alt="mainimage4">
    <img src="images/main5.jpg" width="1350" height="449" alt="mainimage5">
    <img src="images/main6.jpg" width="1350" height="449" alt="mainimage6">
    <img src="images/main7.jpg" width="1350" height="449" alt="mainimage7">
    <img src="images/main8.jpg" width="1350" height="449" alt="mainimage8">
    <img src="images/main9.jpg" width="1350" height="449" alt="mainimage9">
    <img src="images/main10.jpg" width="1350" height="449" alt="mainimage10">
    <img src="images/main11.jpg" width="1350" height="449" alt="mainimage11">
    <img src="images/main12.jpg" width="1350" height="449" alt="mainimage12">
    <img src="images/main13.jpg" width="1350" height="449" alt="mainimage13">
    <img src="images/main14.jpg" width="1350" height="449" alt="mainimage14">
    <img src="images/main15.jpg" width="1350" height="449" alt="mainimage15">
    <img src="images/main16.jpg" width="1350" height="449" alt="mainimage16">
    <img src="images/main17.jpg" width="1350" height="449" alt="mainimage17">
    <img src="images/main18.jpg" width="1350" height="449" alt="mainimage18">
</div>
        <div id="boxright"></div>
     </div>
      <div id="article"></div>
     <div id=no-template-pager class="cycle-pager external">
    
    <div id="tile1" class="tile">
        <img src="images/thumbmain1.jpg" width="200" height="67"></div>
    <div id="tile2" class="tile">
        <img src="images/thumbmain2.jpg" width="200" height="67"></div>
    <div id="tile3" class="tile">
        <img src="images/thumbmain3.jpg" width="200" height="67"></div>
        <div id="tile4" class="tile">
    <img src="images/thumbmain4.jpg" width="200" height="67"></div>
        <div id="tile5" class="tile">
    <img src="images/thumbmain5.jpg" width="200" height="67"></div>
        <div id="tile6" class="tile">
    <img src="images/thumbmain6.jpg" width="200" height="67"></div>
        <div id="tile7" class="tile">
    <img src="images/thumbmain7.jpg" width="200" height="67"></div>
        <div id="tile8" class="tile">
    <img src="images/thumbmain8.jpg" width="200" height="67"></div>
        <div id="tile9" class="tile">
    <img src="images/thumbmain9.jpg" width="200" height="67"></div>
        <div id="tile10" class="tile">
    <img src="images/thumbmain10.jpg" width="200" height="67"></div>
        <div id="tile11" class="tile">
    <img src="images/thumbmain11.jpg" width="200" height="67"></div>
        <div id="tile12" class="tile">
    <img src="images/thumbmain12.jpg" width="200" height="67"></div>
        <div id="tile13" class="tile">
    <img src="images/thumbmain13.jpg" width="200" height="67"></div>
        <div id="tile14" class="tile">
    <img src="images/thumbmain14.jpg" width="200" height="67"></div>
        <div id="tile15" class="tile">
    <img src="images/thumbmain15.jpg" width="200" height="67"></div>
        <div id="tile16" class="tile">
    <img src="images/thumbmain16.jpg" width="200" height="67"></div>
        <div id="tile17" class="tile">
    <img src="images/thumbmain17.jpg" width="200" height="67"></div>
        <div id="tile18" class="tile">
    <img src="images/thumbmain18.jpg" width="200" height="67"></div>
</div>
    <div id="footer"></div>
</div>
</body>
</html>
AND THIS IS MY CSS CODE:
@charset "UTF-8";
/* CSS Document */
body {
font: Arial, Helvetica, Verdana, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000000;
font-size: 12px;
#container {
width: 1600px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
background-repeat: no-repeat;
background-size: auto auto;
background-color: #FFFFFF;
#wrapper {
width: 1600px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
height: auto;
#banner {
width: 1600px;
height: 150px;
padding-left: 550px;
#menubar {
width: 1600px;
nav ul ul {
display: none;
font-size: 12px;
   nav ul li:hover > ul {
display: block;
nav ul {
padding: 0 280px;
list-style: none;
position: relative;
display: inline-table;
nav ul:after {
content: "";
clear: both;
display: block;
nav ul li {
float: left;
nav ul li:hover {
background: 0;
nav ul li:hover a {
color: #E34600;
nav ul li a {
display: block;
padding: 25px 22px;
color: #000000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 60%;
nav ul ul li {
float: none;
border-top: 1px solid 0;
border-bottom: 1px solid 0;
position: relative;
z-index: 100;
nav ul ul li a {
padding: 15px 20px;
color: #E80307;
nav ul ul li a:hover {
font-size: 12px;
.currentLink {
   color: #e76f2b;
#middle {
height: 450px;
width: 1600px;
margin-right: auto;
margin-left: auto;
#boxleft {
display: block;
float: left;
height: 450px;
width: 125px;
background-color: #F7BBBC;
.cycle-slideshow {
width: 1350px;
height: 450px;
display: block;
overflow: hidden;
#article {
width: 1600px;
height: 30px;
.cycle-pager {
width: 1600px;
height: 260px;
margin-left: auto;
margin-right: auto;
padding-‐left: 10px;
position: relative;
.cycle-pager external {
position: absolute;
height: 190px;
.tile {
position: absolute;
width: 200px;
#tile1 {
top: 40px;
left: 200px;
width: 200px;
height: 67px;
float: left;
#tile2 {
top: 40px;
left: 404px;
width: 200px;
height: 67px;
float: left;
#tile3 {
top: 40px;
left: 608px;
width: 200px;
height: 67px;
float: left;
#tile4 {
top: 40px;
left: 812px;
width: 200px;
height: 67px;
float: left;
#tile5 {
top: 40px;
left: 1016px;
width: 200px;
height: 67px;
float: left;
#tile6 {
top: 40px;
left: 1220px;
width: 200px;
height: 67px;
float: left;
#tile7 {
top: 111px;
left: 200px;
width: 200px;
height: 67px;
float: left;
#tile8 {
top: 111px;
left: 404px;
width: 200px;
height: 67px;
float: left;
#tile9 {
top: 111px;
left: 608px;
width: 200px;
height: 67px;
float: left;
#tile10 {
top: 111px;
left: 812px;
width: 200px;
height: 67px;
float: left;
#tile11 {
top: 111px;
left: 1016px;
width: 200px;
height: 67px;
float: left;
#tile12 {
top: 111px;
left: 1220px;
width: 200px;
height: 67px;
float: left;
#tile13 {
top: 182px;
left: 200px;
width: 200px;
height: 67px;
float: left;
#tile14 {
top: 182px;
left: 404px;
width: 200px;
height: 67px;
float: left;
#tile15 {
top: 182px;
left: 608px;
width: 200px;
height: 67px;
float: left;
#tile16 {
top: 182px;
left: 812px;
width: 200px;
height: 67px;
float: left;
#tile17 {
top: 182px;
left: 1016px;
width: 200px;
height: 67px;
float: left;
#tile18 {
top: 182px;
left: 1220px;
width: 200px;
height: 67px;
float: left;
#footer {
width: 1600px;
height: 50px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
float: left;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-align: center;
font-size: 8px;

JQuery Cycle Slideshow not working

Hi there,
I am attempting to insert a slideshow into my website, and I found this great jQuery Cycle code http://jquery.malsup.com/cycle/. I have used this one before and it worked just fine, I even tested the code on its own without my website and again it works. But as soon as I code it into my website it stops working, it just gives me the 7 images stacked. http://designsparkz.ca/indexSlide.html Any help is greatly appreciated.
Lucy

It might work now with what you have, maybe with a little tweak.
Look into your source code for this line in your <head> section...
<script type="text/javascript" src="js/jquery-1.3.js"></script>
Add a comment around it like this...

Save the page and preview in a browser to see if it works. If it doesn't work, then someone can likely help you re-write your page or find a script that will work with the others you use.

How to Convert Jquery Tabs To A URL Link When Selected

The following page has three tabs in the content area. Courier Times, The Intelligencer and Burlington County Times. http://www.phillyburbs.com/test/pbnew/
When one of the tabs is selected, I want the tab to then become a link to a differnet page. Does anyone know how to write this in jquery?

Beginning on line 1239 of your HTML code, change href="http://example.com" to your desired URLs:
<div style="padding-bottom: 10px; display: block" class="tabsetb" id="alltabs">
<a id="newNavButtonsPB-01" class="tabb active" rel="tncms-block-130437" href="http://example.com">Bucks County Courier Times</a>
<a id="newNavButtonsPB-02" class="tabb" rel="tncms-block-130443" href="http://example.com">The Intelligencer</a>
<a id="newNavButtonsPB-03" class="tabb" rel="tncms-block-130511" href="http://example.com">Burlington County Times</a>
</div>
Nancy O.

Storing and converting videos and slideshows (Mac OS)

hi all, new user here.
i have a host of files with some coming from my PC days and am currently using Aperture to store and create m4v and mov files.
right now i have AVI, mpg, mp4, PDF etcetera etcetera that i am trying to organize. when i doubleclick on some of these files they open in AME and i am guessing this means that i need to associate the file type with some other software or if i should convert them to a more convenient format such as mov or m4v which Aperture recognizes. so right now these files are just sitting in a file folder in various formats since Aperture does not appear very good at recognizing some of these video formats.
i would like to /store/ this data in a database or in software that will allow me to get it all organized and i am wondering if Bridge is a good place to do this or if user recommend LR or if there is in fact an adobe product to get this data organized.
i think ideally i would put all images and slideshows and videos in one place but i am guessing this means i would have to convert my videos to some file format (say mov or m4v for Aperture) so i am also wondering if this is a good way to go and if Adobe Media Encoder is the proper tool for this.
any sage advice is really welcome.
P.S. i also have PDF and EPS which both don't seem to play nice with aperture.

Although there sometimes are problems with certain video files Bridge is the correct application to start for organizing your files. You can use the filter panel to only show certain file types, you can rename, rate and label the files, etc etc.
Some video files should be able to play in the preview window. It pays multiple pages PDF also in the preview window although there can be problems with PDF from InDesign showing all content.
You can use the folder panel for easy drag and drop files in different folders.
Anyway, before experimenting make sure to have a proper back up of your files and then start playing around freely to learn more about Bridge.

Convert Album to Slideshow

I created an Album with photos and matching music, but I realized I probably should have done this in SlideShow. Can i convert an album to a "slideshow" If so, how?

When you say you want to make an “album” do you mean a book?
One thing i want to do is to make a dvd of the pics that i can play on any regular dvd player. I want to show people my pics on their TV. I don't necessarily need a fancy slideshow. I would like to be able to pause on a picture.
Share -> Send to iDVD and make the disk with iDVD. You must do this with iDVD that’s the only app that can create a disk your “regular DVD player” will undersand.
Regards
TD

Convert gallery to slideshow

Hi
I've got a user-controlled gallery on a webpage which is
working fine at the moment:
Aztec site
The client now wants it to be a slideshow however. Rather
than start from scratch, is there any way to keep it as it is, but
make it act as if the user is clicking on each thumbnail every 10
seconds or so. I'd be hiding the thumbnails.
In effect, I want to convert it from an interactive gallery
to a passive slideshow, but keep the scrolling effect.
Here's the flash file:
link
And here's the ActionScript:
this.createEmptyMovieClip("images", 100);
this.attachMovie("mask", "mask", 101);
mask._x = images._x =5;
mask._y = target = 5;
images.setMask(mask);
images._y = -1000;
speed = 5;
for (var i = 0; i<8; i++) {
var img = images.attachMovie("image"+i, "image"+i, i);
img._y = img._height*i;
var thumb = this["thumb"+i];
thumb._alpha = 60;
thumb.pos = target+(i*-img._height);
thumb.onPress = function() {
target = this.pos;
thumb.onRollOver = function() {
this._alpha = 100;
thumb.onRollOut = function() {
this._alpha = 60;
this.onEnterFrame = function() {
images._y += (target-images._y)/speed;

place your thumb.pos values in an array and initialize a
timer (setInterval) that will reassign target to be one of the
array values peroidically.

Can I convert a pdf slideshow with narrative to a movie file? Using Pro version 8

I am working with a template software (Vacation Bible School) where I insert pictures and at the end, it plays a slideshow with narrative (already in the template) when you open it up and hit the spacebar. it works fine, but there are 5 different files and the company we got the template/pdf files from suggest for presentation purposes, I should just open up each file individually and start the slide show. it seems kind of clumsy having to open up each file individually, play it, close it and then go to the next file. It would be great if I could capture the slideshow as a movie file, then combine all 5 movie files into one file that can be played on a CD player (I use Sony Vegas studio and Nero software for this). I am using Acrobat Pro version 8. Any suggestions?

It can't be done in Acrobat.
I just did a Google search on "pdf slideshow to video" and saw a couple of third party products that claim to be able to do it. I have never had a need for that, and can't claim how well they work.

Converting "book" to "slideshow"

I've created a book (some of the pages have multiple photos) and would like to create a slideshow (to ultimately be burned via iDvd) that would show each of the pictures individually. Unfortunately I can't even seem to figure out how to create the slideshow from the book. When I click on the "+" the only choices are "album" and "smart album" as the "slideshow" option is greyed out. Is it possible to do what I want?
I'm using iPhoto 6.01
Thx

Hi scott,
This is from the iPhoto Help menu:
"Viewing a book as a slideshow
You can view a book as a slideshow without making it a separate slideshow in your Source list. You can set transition effects and add background music for this temporary slideshow.
Tip: If you want to play the same slideshow later, adjust the transition effects for individual slides, or add pan and zoom effects, you should create a slideshow that appears in your Source list.
To view a book as a slideshow:
Select a book you want to display as a slideshow.
Click the Play button (shown above). If you don't see the Play button, click the right-pointing arrows (shown below) in the bottom-right section of the window and choose Play from the menu that appears.
Click Settings at the top of the Slideshow dialog to set one or more of the following options:
Choose a transition effect from the Transition pop-up menu. If necessary, set a direction for the effect using the arrow buttons.
Set the duration of the transition by dragging the Speed slider.
To change the display duration for each slide, type a new duration.
Select "Shuffle slide order" to play slides in random order.
Select "Repeat slideshow" to make your slideshow repeat automatically upon completion.
Click Music at the top of the Slideshow dialog to set one or more of the following options:
Select the "Play music during slideshow" checkbox if you want background music played during your slideshow.
Select a song to play during your slideshow from the Sample Music folder or your iTunes library. You can search for a song by typing the artist or title in the search field.
Click Save Settings if you want to save these slideshow settings for your book slideshow.
Click Play.
Press the mouse button at any time to stop a slideshow.
Press the Space bar to pause and resume playing a slideshow.
Use the Right and Left Arrow keys to move through a slideshow manually.
Press Delete to remove the photo currently being displayed from the book.
Press Command-R to rotate the photo currently being displayed in your slideshow.
Press 0, 1, 2, 3, 4, or 5 to assign a rating to the photo currently being displayed."

Converting a Keynote slideshow into a QT movie

Ok, I've got a nicely made keynote presentation with precisely timed events where text appears and the slides fade from one to the other. When I do the QT export it moves at a totally unacceptable snail's pace. A 10 minute Keynote slideshow was still running after over an hour of tedious transition. What am I doing wrong??

I just did a sample presentation using 5 slides to see the results. When I exported the file as QT self-playing movie using the standard of 5 sec slide duration and 2 seconds for build duration the movies was 25 seconds. When I lowered the slide duration to 3 seconds and kept the build duration at 2 seconds, the resultant movie was 10 seconds faster at 15 seconds.
Going into Custom and altering the FPS, and compression formats from H264 to Video or JPEG Movie did NOT alter the length of the QT output movie at all.
So, I think if you lower the slide duration to 3 seconds , you should get a significant improvement. I hope this helps

JQuery Cycle 2 Image Slideshow (Works (cycles) in Explorer, but not in Safari or Chrome??

I am novice designer. I copied code for Cycle2 into my head (declaration or initializer?) and body (image source) of HTML document. The slider cycles through pictures in Explorer, but not in Safari or Crome. Any help, suggestions, alternatives would be appreciated. Thank you.
I have tried
Spry Content Slideshow- trouble being responsive when resized.
FlexSlider2.2- trouble with image height/viewport sizing to big (kinda had workaround), but had trouble with getting HTML text and image together on one slide.
WOWSlider- could not get rid of the gutter/margins surrounding the slider.
Cycle2-won't work in all browsers (for me)
Here is my code (on otherwise empty HTML and CSS pages) for Cycle 2
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 document with Cycle2</title>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
<title>Untitled Document</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">


<script src="css/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
<div id="top">This is the content for Layout Div Tag "top"</div>
<div id="header">This is the content for Layout Div Tag "header"</div>
<div id="navigation">This is the content for Layout Div Tag "navigation"</div>
<div id="slider"><h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="700"
>

<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">

</div></div>
<div id="content1">This is the content for Layout Div Tag "content1"</div>
</div>
</body>
</html>

Resize/re-scale & optimize all images for the web in your graphics editor before you insert them into your web pages. Saves bandwidth and reduces page load.
Cycle2 is a responsive slideshow. If you want all images to remain 400px and not responsive to layout, you'll need to modify the CSS code a little.
Details on using Previous & Next links are in the documentation.
http://jquery.malsup.com/cycle2/demo/prevnext.php
Nancy O.

Replace flash with JQuery Cycle plugin on my website

Hello,
I am hoping someone can help me with a little programming on my current website www.ci.guilford.ct.us
I am not a website developer so I am having some difficulty getting the down. I would like to replace my current flash content that scrolls through some photos with the JQuery Cycle plugin. With a lot of mobile devices not sporting flash I am leaning more toward this. Any help would be greatly appreciated and if there is anything else needed please let me know.
Thanks,
Tony

Well I got nailed by Adobe for my last post.
Here's how all of these jQuery effects plugins work.
They need to be in a div with a particular id or class. And you tell them, "put the thing there."
I still use a really old jQuery plugin that has been more than superseeded by Cycle. After I figured it out (and that took about two weeks) these plugins became really easy to understand.
So, let's look at Nancy's example:
She establishes a class in the style section (this might also be in your style sheet. It's called cycle-slideshow. It's in her document above with a period before it (which is how you define a class in CSS).
Now, in the HTML below, she creates the div:
<div class="cycle-slideshow" ...
Then she does a couple of commands to make cycle work:
... data-cycle-pause-on-hover="true"
data-cycle-speed="2000">
Normally, I make these "pause-on-hover things "false" because, like in your own website, you simply want the images to show, one after another.
Then she does a bunch of images:
<img src= ...
Now, of course you have to call two things in your page to get everything to work. First, you need to call jQuery. I generally host my own copy of jQuery for each website, but it is perfectly fine to call one remotelly:

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
And you have to call the jQuery plugin, called Cycle:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
If you are still having trouble, please respond to my message from yesterday by phone.

Jquery Cycle 2 (Options)

I am working on Cycle 2 Slider that is beginning good--(Image, Heading, and Text on one slide). (I have some more styles I may style it with), Before that I am trying to get certain 'Options' to work with the slider ; namely PAGER BASIC, PREV/NEXT, and PAUSE/PLAY COMMAND. I am having problems getting them to work (appear small behind the image?), as well as getting anything to position directly under the image.
Currently I have a PREV/NEXT somewhat working, but can not get postioned.--Not only postioned, but it is outside the .gridcontainer, and I can not get it back properly.
The other 'Options' I can not even get to work properly, let alone position.
I am assuming if I can get the 'Options' to work, I would use some type of relative positioning rule(s) to apply to the 'Option' elements? --But I'm not sure?
Here is the code:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="css/core/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/core/styles.css" rel="stylesheet" type="text/css">


<script src="css/core/respond.min.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="top">This is the content for Layout Div Tag "top"</div>
<div id="header">This is the content for Layout Div Tag "header"</div>
<div id="navigation">This is the content for Layout Div Tag "navigation"</div>
<div id="section"><div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-timeout="2000"
    data-cycle-next="#next"
    data-cycle-prev="#prev"
    data-cycle-slides="> div"
>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>

</div>
</div>
</div>

<div class="center">
<a href=# id="prev">Prev</a> | <a href=# id="next">Next</a>
</div>
</body>
</html>
Any suggestions or help would be appreciated. Thank you

Try this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2</title>



<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
margin:0;
padding:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
/**Slideshow**/
.cycle-slideshow {
    width: 80%; /**adjust width as required**/
    margin: 0 auto;
    text-align: center;
    position:relative;
    overflow:hidden;
    border:1px dotted red;
.cycle-slideshow img { max-width: 100%;float:left; }
.cycle-slideshow h3,
.cycle-slideshow p {margin:0; padding:0 2%; text-align:left}
/* prev / next arrows */
.cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 10%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: 100%;
    cursor: pointer;
.cycle-prev {
    left: 0;
    background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
.cycle-next {
    right: 0;
    background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
.cycle-prev:hover, .cycle-next:hover {
    opacity: .7;
    filter: alpha(opacity=70)
/**END SLIDESHOW STYLES**/
</style>
</head>
<body>
<div class="gridContainer clearfix">

<div class="cycle-slideshow"
data-cycle-timeout="2000"
data-cycle-slides="> section"
>

<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<section>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

</div>

</div>
</body>
</html>
The prev/next arrows appear when you mouse over the slides.
Nancy O.

Dreamweaver CS6- jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
<p>
    <img src="Leather web page/DSC_0531_4925.JPG"/>
    <img src="Leather web page/DSC_0035_edited-1.JPG"/>
    <img src="Leather web page/DSC_1593_edited-1.jpg"/>
    <img src="Leather web page/DSC_1595_edited-1.jpg"/>
    <img src="Leather web page/DSC_1821.jpg"/>
    </div>
Any help would be greatly appreciated.

1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    allowWrap:        true,
    autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
    delay:            0,
    easing:           null,
    fx:              'fade',
    hideNonActive:    true,
    loop:             0,
    manualFx:         undefined,
    manualSpeed:      undefined,
    manualTrump:      true,
    maxZ:             100,
    pauseOnHover:     false,
    reverse:          false,
    slideActiveClass: 'cycle-slide-active',
    slideClass:       'cycle-slide',
    slideCss:         { position: 'absolute', top: 0, left: 0 },
    slides:          '> img',
    speed:            500,
    startingSlide:    0,
    sync:             true,
    timeout:          4000,
    updateView:       0
// automatically find and run slideshows
$(document).ready(function() {
    $( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
    width: 1000px;
    margin: auto;

Can't get page forwarding to work after jQuery slideshow

The web site index page uses jQuery and jquery.cycle2 to run a slideshow. Once it is done I want to go to a new page, but have been unsuccessful in getting it to work. Meta tags in the head either skip the slideshow or don't work. Is there a way to add page forwarding to the jQuery cycle or would it make sense ot have each image on a separate page and just forward through each one?
This is the jQuery scropt:
<div id="container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div align="center" class="cycle-slideshow">
<img src="wwwroot/artwork/StudioNorth2Aa.jpg" width="1060" height="633" alt=""/>
<img src="wwwroot/artwork/StudioNW3Aa.jpg" width="1060" height="694" alt=""/>
<img src="wwwroot/artwork/StudioSWAa.jpg" width="1060" height="700" alt=""/>
<img src="wwwroot/artwork/StudioSouth1Aa.jpg" width="1060" height="664" alt=""/>
<img src="wwwroot/artwork/StudioEast2aa.jpg" width="1060" height="657" alt=""/>
</div>
George

You could use a JQuery time delay before redirecting. Count how many seconds the slideshow takes to display all the images then add the below in the <head></head> section of your page - below is set to 20 seconds
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
setTimeout(function() {
window.location.href = "http://www.bbc.co.uk";
}, 20000);
</script>

Converting jQuery Cycle slideshow to jQuery Cycle2

Similar Messages

Maybe you are looking for