5 Replies Latest reply on Nov 2, 2013 12:32 PM by Nancy OShea

    Marquee

    A. Mac

      How do I make a marquee of images in cs6? anyone have any idea please?

        • 1. Re: Marquee
          mhollis55 Level 4

          Please help me understand your question.

           

          If, what you are looking to do is to create a "slider" where images change (either through some effect or by dissolving one into another) then your answer is here:

           

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

           

          Follow his instructions. Please note, his demos are small rectangular images on his page, but the dimensions of these images may be whatever you wish. All you need to do is to define a space to put the image files into.

           

          -Mark

          • 2. Re: Marquee
            A. Mac Level 1

            No sorry what I want to do is set a row of photographs in an editable area and make them scroll across the scren left to rght and then repeat when at the end automaticaly. I believe it is called a marquee? Andy

            • 3. Re: Marquee
              dreamweaver70 Level 1

              A marquee is generally a one-line horizontal scrolling text 'marquee'. You sound like you are looking for an image or content slider.

               

              Try 'Anyslider' good content/image slider

              • 4. Re: Marquee
                mhollis55 Level 4

                You mean like this:

                 

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

                 

                Seriously, read his entire website for Cycle 2. You can set it up to continuously slide in images in a marquee, fade them in, repeat from start, scroll back to beginning, include a lower third description of the slide, include previous/next buttons and so on.

                 

                -Mark

                • 5. Re: Marquee
                  Nancy OShea Adobe Community Professional & MVP

                  I think what you really want is a Carousel.  Copy & paste the following code into a new, blank document.  SaveAs test.html.  Replace images with 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.

                  1 person found this helpful