Skip navigation
Currently Being Moderated

resizing works now jquery doesn't

Apr 13, 2012 12:52 PM

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?

 
Replies
  • Currently Being Moderated
    Apr 13, 2012 3:19 PM   in reply to reelhero

    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>
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 4:27 PM   in reply to reelhero

    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/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 15, 2012 7:41 PM   in reply to reelhero

     

    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..

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

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