1 Reply Latest reply: Nov 19, 2013 4:39 PM by Nancy O. RSS

    is there something in creative cloud or in my dreamweavercs6

    dearhead4403

      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

        • 1. Re: is there something in creative cloud or in my dreamweavercs6
          Nancy O. MVP

          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.