Skip navigation
dearhead4403
Currently Being Moderated

is there something in creative cloud or in my dreamweavercs6

Nov 19, 2013 4:09 PM

I use dreamweaver cs6 and als a member of creative cloud need to make a image slideshow on my website how can I do this  Or do I need a special prgram

 
Replies
  • Currently Being Moderated
    Nov 19, 2013 4:39 PM   in reply to dearhead4403

    Although you could use Photoshop & Lightroom to create a photo album for the web, I personally prefer jQuery plugins.

     

    Cycle2 alone or with Fancybox might be all you need.  Just copy & paste this code into a new, blank document.  Change thumbnails & images to your own.

     

     

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>HTML5, Cycle2 Carousel with Fancybox</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--FANCYBOX plugin-->
    <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%;
    }
    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>
    <!--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/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> 
    <!--end slideshow--> 
    </div>
    
    <!--begin Cycle2 pager--> 
    <div class="cycle-pager" id="pager"> 
    <!--end pager--> 
    </div>
    </section>
    
    <!--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:

More Like This

  • Retrieving data ...

Bookmarked By (1)

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