5 Replies Latest reply: Apr 15, 2012 7:41 PM by sudarshan.t RSS

    resizing works now jquery doesn't

    reelhero Community Member

      Im trying to get the jquery script to operate like this (hover fade, fade in on load)

       

      http://toddheymandirector.com/REEL/index_newlook.html

       

      but the thumbs to resize and stack when shrunk like this (stretch and shrink your browser)

       

      http://toddheymandirector.com/REEL/index_newlook_gallery2.html

       

      without distorting the other images (see the twitter and google plus buttons

       

      help?

        • 1. Re: resizing works now jquery doesn't
          Rik Ramsay Community Member

          You don't need jquery to do that transition, especially if you are intending to use HTML 5 as per your previous post. The below code does the transition in ALL browsers except IE but IE will still get the opacity change of the image - it just won't look as smooth.

           

          If you don't want to use the <figure> tags, remove the CSS for those elements and rename to whatever method you use - <li>, <div> etc. The images also link separately.

           

           

          <!DOCTYPE>
          <html>
          <head>
          <meta content="text/html; charset=UTF-8" />
          <title>Untitled Document</title>
          <style type="text/css">
          body {
              background-color:#666666;
              margin:0;
              padding:0;
              font-family:Arial, Helvetica, sans-serif;
              color:#FFFFFF;
          }
          #container {
              width:100%;
              height:auto;
              margin:0;
              padding:0;
          }
          #title {
              width:100%;
              float:left;
              font-size:140%;
              line-height:150%;
              margin-bottom:30px;
              text-align:center;
          }
          #gallery {
              width:100%;
              height:auto;
              margin:0;
              padding:0;
              float:left;
          }
          
          a img{
          border:none;
          }
          
          figure {
              min-width:25%;
              padding:0;
              float:left;
              background-color:#666666;
          }
          figcaption {
              font-size:100%;
              margin-bottom:20px;
          }
          figure img {
              opacity:0.7;
              -webkit-transition: opacity 0.5s ease-in-out;
              -moz-transition: opacity 0.5s ease-in-out;
              -o-transition: opacity 0.5s ease-in-out;
              -ms-transition: opacity 0.5s ease-in-out;    
              transition: opacity 0.5s ease-in-out;
              display:block;
              border:none;
              margin-bottom:5px;
              padding:0;
              width:100%;
          }
          
          figure img:hover {
              opacity:1;
          }
          </style>
          </head>
          
          <body>
          <div id="container">
            <div id="title">This is a floating web gallery</div>
            <section id="gallery">
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
              <figure><a href="#"><img src="nike.png" /></a>
                <figcaption>This is an image</figcaption>
              </figure>
            </section>
          </div>
          </div>
          </body>
          </html>
          
          • 2. Re: resizing works now jquery doesn't
            Nancy O. CommunityMVP

            If you ask 3 web designers how do something, you'll get 6 different answers.  

            That said, copy & paste this into a new, blank document. 

            Note 1: not one APDiv was used here.  You don't need them. 

            Note 2:  I used real text instead of images of text.  In the longrun, real text is better for your site.

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>TODD HEYMAN DIRECTOR</title>
            
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
            </script>
            
            
            <style type="text/css">
            html {font-size: 100%}
            
            body {
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size: 1em;
            width:96%;
            background: #595959; 
            color:#FFF; 
            padding:20px;}
            
            /**all links**/
            a {
            opacity: 0.5;
            text-decoration:none; 
            font-weight:bold; 
            color: #FFFFCC;}
            
            a:hover {color: #FFF}
            
            /**moves site title off screen**/
            h1 {
            margin:0;
            padding:0;
            font-size: 11px;
            text-indent:-9999em}
            
            #menu ul {margin:0; padding:0}
            
            #menu li {
            list-style:none;
            font-size: 1.5em;
            }
            
            #menu li a {
            display:inline-block;
            width: 6em;
            }
            
            #thumbs p {
            margin:0;
            padding:0;
            float:left;
            width:auto; 
            /**text captions**/
            font-size:14px; 
            text-align:center; 
            }
            
            #thumbs img {
            border:none;
            width: 100%;
            max-width:260px; /**Native image width**/
            }
            
            /**hide thumb captions**/
            #thumbs p a {color:#595959}
            /**show thumb captions on hover**/
            #thumbs p a:hover {color: #FFFFCC}
            
            /**float clearing**/
            .clearing {
            clear:both;
            display:block;
            visibility:hidden;
            }
            
            </style>
            </head>
            <body>
            <h1>TODD HEYMAN DIRECTOR</h1>
            <img src="http://toddheymandirector.com/Images/common_jsh/mast.png" />
            <ul id="menu">
            <li><a href="#">REEL</a></li>
            <li><a href="#">MORE</a></li>
            <li><a href="#">FILM</a></li>
            <li><a href="#">BOARDS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">CONTACT</a> </li>
            </ul>
            <p style="margin-left: 40px"><a href="#">Share</a> | <a href="#">Follow</a></p>
            
            <!--BEGIN GALLERY IMAGES -->
            <div id="thumbs">
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            <p><a href="#"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png"/><br /> Optional captions</a></p>
            
            
            <!--end thumbs --> </div>
            
            <!--float clearing -->
            <p class="clearing"> </p>
            
            ---Insert your social icons here---
            
            
            <!--jQuery transitions -->
            <script type="text/javascript">
              $(document).ready(function(){
                    $('body') .hide();
                    $('body') .fadeIn(5000);
                    $('#thumbs').hide().delay(2200).fadeIn (1000); 
              $("a").hover(function() {
                  $(this).stop().animate({opacity: "1"}, 'slow');
                },
                function() {
                  $(this).stop().animate({opacity: "0.5"}, 'slow');
                });
              });
            </script>
            </body>
            </html>
            

             

             

             

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            • 3. Re: resizing works now jquery doesn't
              reelhero Community Member

              you guys are wonderful!

               

              i took a combination of what you gave me (nancy you are so right..its the same thing in the film business) and i got everything to work except theyre stacking on top of each other instead of side by side :

               

              http://toddheymandirector.com/REEL/index_newlook_gallery2222.html

               

              stretch the browser you can see they are resizing like they did before except the fade and rollovers now work (riki i changed the il to div)

               

               

              i suspect its in this style

               

              }

               

               

              #gallery ul div{

                  min-width:16.6%;

                margin:0;

                  padding:0;

                  float:left;

                  background-color:#595959;

              }

               

              im almost there - what would make them go side by side again?

              • 4. Re: resizing works now jquery doesn't
                reelhero Community Member

                IT WORKS!!!

                 

                http://toddheymandirector.com/REEL/index_newlook_gallery2222aa.html

                 

                Now all i have to do is figure out how to keep the social buttons (fb google tweet) below the thumbs when they drop below

                • 5. Re: resizing works now jquery doesn't
                  sudarshan.t CommunityMVP

                   

                  Now all i have to do is figure out how to keep the social buttons (fb google tweet) below the thumbs when they drop below

                   

                  Please mark the other pending question answered. You had posted this separately here: http://forums.adobe.com/message/4336702#4336702 and it has been answered.

                   

                  And if possible, try not to 'bump' posts..

                   

                  Cheers..