Skip navigation
Kel_Leach
Currently Being Moderated

Is it possible to create a basic slideshow like this (http://rdafnqts.org.au/) in Dreamweaver cs6?

Sep 3, 2013 5:48 PM

I have very basic code knowledge but I'm trying to work out if it's possible to insert a basic slideshow similar to the one on the website link I provided? I have had a look at the jquery.cycle2 but can't work out how to make the pictures visible. In the 'live' view it just shows a message saying jquery cycle2 and the text of my photos but no actual images. Thanks in advance

 
Replies
  • Currently Being Moderated
    Sep 4, 2013 6:20 AM   in reply to Kel_Leach

    You have to use the same class name for the container for your slide show in cycle2.

     

    <div class="cycle-slideshow">

        <img src="../images/image1.jpg">

        <img src="../images/image2.jpg">

        <img src="../images/image3.jpg">

        <img src="../images/image4.jpg">

    </div>

     

    Make sure you follow the directions given here: http://jquery.malsup.com/cycle2/demo/basic.php

     

    The <script> tags go in your <head> section and the rest goes somewhere in your <body>. Right now, there is nothing on your test page that has to do with cycle2.

     

    It may be easiest for you to get it working in a blank page first, then transfer the links and html over to your actual page.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 11:28 AM   in reply to Kel_Leach

    Copy & paste this code into a new, blank document.  SaveAs cycle2_test.html.  Preview in browsers.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 document with Cycle2</title>
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--Cycle2 Plugin Script-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    
    
    <style>
    .cycle-slideshow {margin:0 auto; width:50%;}
    .cycle-slideshow img {max-width:100%}
    </style>
    
    </head>
    <body>
    <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>
    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-pause-on-hover="true"
        data-cycle-speed="1500"
     >
    <!--your images go here-->
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
    <img src="http://malsup.github.com/images/beach4.jpg">
    <img src="http://malsup.github.com/images/beach9.jpg">
    <!--end slideshow-->
    </div>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 6:46 PM   in reply to Kel_Leach

    The slideshow image paths are all pointing to your local hard drive

     

    <img src="C:\Users\User\Documents\Website files\images\crops1.jpg">

    <img src="C:\Users\User\Documents\Website files\images\quilpie1.jpg">

    <img src="C:\Users\User\Documents\Website files\images\sunset1.jpg">

    <img src="C:\Users\User\Documents\Website files\images\wine1.jpg">

    <img src="C:\Users\User\Documents\Website files\images\cattle1.jpg">

     

    They need to point to the folder on the server in which the images are stored.

     

    Something like:

     

    <img src="images\crops1.jpg">

    <img src="images\quilpie1.jpg">

    <img src="images\sunset1.jpg">

    <img src="images\wine1.jpg">

    <img src="images\cattle1.jpg">

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 18, 2013 10:19 PM   in reply to Nancy O.

    Thought I'd ask a similiar question along the lines of the topic:

     

    Is it possible to use this code Nancy gave and when hovered over the pic, pauze it? And if you click the the pic it becomes enlarged? What I'm basically asking is that if it's possible to combine the code from Nancy with something like the lightbox-script (http://lokeshdhakar.com/projects/lightbox2/)?

     

    Thanks in advance.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 9:33 AM   in reply to Pilaarbijter
    Is it possible to use this code Nancy gave and when hovered over the pic, pauze it?

    It already does that by virtue of this code.

     

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

     

    And if you click the the pic it becomes enlarged? What I'm basically asking is that if it's possible to combine the code from Nancy with something like the lightbox-script (http://lokeshdhakar.com/projects/lightbox2/)?

     

    I've never tried to combine separate plugins that way.  But you might be able to cobble something together with Fancybox2 (a jQuery lightbox viewer) because it uses the same core library as Cycle2.  That said, I've never tested them together so I can't say for sure if it will work.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 10:39 AM   in reply to Nancy O.

    I am a newbie at the jQuery-things so I'm not sure I follow.

     

    I've been trying to fiddle around with the code in dreamweaver but so far no results. I'll post the line underneath. Could you help me out some more?

     

    <img src="<a href="img/SVergroot.jpg" data-lightbox="img/SVergroot.jpg" title="My caption"> <img src="img/SS.jpg" width="200" height="267"></a>">

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 11:05 AM   in reply to Pilaarbijter

    I was curious about this and in fact, you can combine Cycle2 with Fancybox2. 

    Copy & paste the following code into a new, blank document.  SaveAs TEST.html  and preview in browsers.  Replace thumbnails and full sized images with your own.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, Cycle2 Carousel and Fancybox</title>
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--FANCYBOX plugins-->
    <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>
    
    <!--Cycle2 Plugin-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    
    <!--Cycle2 Carousel-->
    <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%;}
     article {float:left; width:75%; padding:2%;}
     .slideshow img {border:4px solid #999;}
    
    /* 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>
    
    <article>
    <h2>Article</h2>
    
    <!--begin slideshow-->
    <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"
    >
    <!--insert thumbnails and links to full size images below-->
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> 
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> 
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> 
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> 
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 5" /></a> 
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 6" /></a>
    
    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 7" /></a> 
    
    <!--end slideshow-->
    </div>
    
    <!--begin Cycle2 pager-->
    <div class="cycle-pager" id="pager">
    <!--end pager-->
    </div>
    
     </article>
    
     <!--Cycle2 function code-->
    <script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
    
    <!--FancyBox function code--> 
    <script>
            $(document).ready(function() {
                $('.fancybox').fancybox();
            });
        </script>
    
    </body>
    </html>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 11:29 AM   in reply to Nancy O.

    This is great allready! Thanks!

     

    But there is something that I would like to change with the design. Is it possible to have all the pics appear after each other in a regular slideshow but maintaining the functionality the click each pic to enlarge them?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 11:51 AM   in reply to Pilaarbijter

    Sure.  Just use the default Cycle2 slideshow plugin without the Carousel options.

    http://jquery.malsup.com/cycle2/

     

    Demos:

    http://jquery.malsup.com/cycle2/demo/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:18 PM   in reply to Nancy O.

    I'm sorry that I have to ask this, but how would the code look like then? I've been trying for to change it, but I can't seem to get my head around it.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:24 PM   in reply to Pilaarbijter

    Let's see what you have done so far.  What's the URL to your test page?

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:28 PM   in reply to Nancy O.

    I think I've just figured it out: I just had to remove the carousel-script and it seems to work now.

     

    I do however have come across another problem:  the pics that I've typed in, dont seem to load, neither on the slideshowscreen as the enlargementscreen. This is what I entered in the code:

     

    <a class="fancybox" data-fancybox-group="gallery" href="\originele_images\flash\SVergroot.jpg" title="optional captions"><img src="\originele_images\flash\SS.jpg" alt="Thumbnail 1" /></a>

     

    <a class="fancybox" data-fancybox-group="gallery" href="\originele_images\flash\S2Vergroot.jpg" title="optional captions"><img src="\originele_images\flash\S2S.jpg" alt="Thumbnail 2" /></a>

     

    This was tested with Dreamweaver in preview in browserwindow. The pics I'm reverring to are present in the directory specified which is the folder from which I load all of my pic on the website. What am I doing wrong?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:31 PM   in reply to Pilaarbijter

    Without a link to your page, I'm clueless.  Sorry.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:35 PM   in reply to Nancy O.

    I'm loading it up right now, shouldn't take long now.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:40 PM   in reply to Nancy O.
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:53 PM   in reply to Pilaarbijter

    Did you upload your images?  I'm getting a 404 Not Found Error on all 4.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:59 PM   in reply to Pilaarbijter

    OK.  I see the problem.  Your image paths are not correctly coded.

     

    Change this:

    <a class="fancybox" data-fancybox-group="gallery" href="\originele_images\flash\SVergroot.jpg" title="optional captions"><img src="\originele_images\flash\SS.jpg" alt="Thumbnail 1" /></a>


    <a class="fancybox" data-fancybox-group="gallery" href="\originele_images\flash\S2Vergroot.jpg" title="optional captions"><img src="\originele_images\flash\S2S.jpg" alt="Thumbnail 2" /></a>

     

     

    to this:

     

    <a class="fancybox" data-fancybox-group="gallery" href="originele_images/flash/SVergroot.jpg" title="optional captions"><img src="originele_images/flash/SS.jpg" alt="Thumbnail 1" /></a>


    <a class="fancybox" data-fancybox-group="gallery" href="originele_images/flash/S2Vergroot.jpg" title="optional captions"><img src="originele_images/flash/S2S.jpg" alt="Thumbnail 2" /></a>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 1:09 PM   in reply to Nancy O.

    Nancy I could kiss you right now! I've been struggling with this for way too long and now it's finally resolved!

    Thank you very much

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 1:22 PM   in reply to Nancy O.

    Although one question does come to mind: how can i adjust the positioning of the slideshow?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 1:35 PM   in reply to Pilaarbijter

    You should remove the carousel & pager since you're not using it.

     

    <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-speed="1000"
    data-cycle-slides="> a"
    >

     

    <!--begin Cycle2 pager-->

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

    <!--end pager-->

    </div>

     

    Add this to your layout.css file

     

    .slideshow {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    margin-left: 265px;  /**adjust margins as needed**/

    }

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 28, 2013 9:55 AM   in reply to Kel_Leach

    This unclosed div will create problems for the entire layout

    <div class="gridContainer clearfix">

     

    You also have 16 other code validation errors caused by spaces in file names, missing alt attributes on images and ampersands that must be changed to code.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rda-ddsw. org.au%2Ftest%2Findex1.html

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points