5 Replies Latest reply: Mar 12, 2014 12:09 PM by Nancy O. RSS

    How do I center a slideshow containing various width images?

    Noradc Community Member

      Hello.  I have slideshows on my website that are centered as I like them to be.  But when I click on the thumbnail images that serve as links to open a page containing a slideshow, the image first appears at the left side of the page then quickly moves to the center.  The slideshows contain images of various widths.  I would like that the image appear in the center only.  In the stylesheet, the slideshow styling has the following information...

       

      .cycle-slideshow {

          width: auto;

          max-height: 650px;

          background: #333;

          margin-bottom: 20px;

          z-index: 50;

      }

       

      .cycle-slideshow img {

          width: 0 auto;

          max-height: 610px;

          padding-top: 50px;

          opacity: 0;

          filter: alpha(opacity=0);

      }

       

      In the html code, the head section contains the javascript:

      <script type="text/javascript" src="assets/jquery.cycle2.center.js"></script>

       

      In the html code, the body section contains the following information for centering horizontally:

       

      <div class="cycle-slideshow"

          data-cycle-fx=fade

          data-cycle-timeout=0

          data-cycle-caption="#alt-caption"

          data-cycle-caption-template="{{alt}}"

               data-cycle-auto-height=container

            data-cycle-center-horz=true

          data-cycle-center-vert=false>

       

       

      My first thought was that the movement was due to the width of the slideshow being too wide.  But adjusting the width according to the widest image didn't work.  The widest image is 772px.  I tried other selectors but they didn't work either.  I would appreciate having your advice.  Thank you very much.

        • 1. Re: How do I center a slideshow containing various width images?
          Nancy O. CommunityMVP

          Without a link, I have no idea what you're talking about.  I don't see anything in your code fragments that suggest your cycle images are opening in a new page.

           

           

          Nancy O.

          • 2. Re: How do I center a slideshow containing various width images?
            Noradc Community Member

            Hello Nancy O,

             

            My website is...   http://norachristians.com

            The slideshow on the first page works the way that I want it to.

             

            The thumbnail images are found at the following website addresses, they serve as links to the pages where the additional slideshows are...

             

            http://www.norachristians.com/still_image.html

            http://www.norachristians.com/painting/watercolor.html

             

            Thank you.

            Nora

            • 3. Re: How do I center a slideshow containing various width images?
              Nancy O. CommunityMVP

              Try these changes to your CSS:

               

              .cycle-slideshow  {

                  margin: 0 auto;

                  border: 1px solid #bbb;

                  background: #333;

                  margin-bottom: 20px;      

              }

               

               

              .footer_copyright {

                  position: relative;

                  clear: both;

                  font-family: Arial, Helvetica, sans-serif;

                  font-size: .9em;

                  margin-left: 0px;

                  margin-bottom: 25px;

                  z-index: 5;

                  color: #CCC;

                  letter-spacing: .6px;           

              }

               

              Z-index (stacking order) serves no purpose except when used on positioned elements.  You have used it several times where it is not necessary.

               

               

               

              Nancy O.

              • 4. Re: How do I center a slideshow containing various width images?
                Noradc Community Member

                Hello Nancy 0,

                 

                Thank you for the information.  I didn't know that about the position and z-index.  I made the changes to the css as suggested.  But no change happened.  So I  tried changing the following in my html code so that it would be the same as malsup's sample for comparison...

                 

                data-cycle-fx=fade  to scrollHorz   
                data-cycle-timeout=0  to 2000

                 

                The first image slide still loaded from the left and then centered on the page. Then the image slides scrolled along the page from right to left.  I then saw that Malsup has the example showing towards the bottom of its webpage.  After decreasing the window size, I saw that the first image appears very quickly from the lower left and then to the center as does mine except on a smaller scale.  I've come to the conclusion that this is a normal action for the javascipt function.  But would it be too much to ask if this could be less noticeable?   Also, when I made the changes to my slideshow to scroll, I noticed that as the image slides scrolled out of the slideshow, they extended beyond the slideshow border and even the container div.  I notice that this doesn't happen in the malsup example.  Malsup's image slides are not visible beyond the edge of the background color.  How can I have my slideshow images stop at the edge of the slideshow background color also?  I greatly appreciate your advice.  Thank you very much.

                 

                Noradc

                • 5. Re: How do I center a slideshow containing various width images?
                  Nancy O. CommunityMVP

                  Flash of unstyled content (FOUC) occurs most often in older IE browsers or on very slow internet connections.  I don't see any delays on your site, Malsup's site or in my own Cycle2 slideshows.  So I'm guessing this is only a problem at your end.

                   

                   

                   

                  Nancy O.