SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem resizing images

    Hi everybody
    I have this code html css and javascript
    How do I show two images with distance between them of 5px
    I made an example on my site but does not work javascript
    On the side works
    How to change the code to appear in two images
    Thanks to all

    Code:
    <script type="text/javascript">
    $ = jQuery;
    $(document).ready(function(){
      
      initializareImagini(450);
      
    });
    
    function initializareImagini(speed){
      
      $(".image").each(function(){
        var img = $(this),
            w = img.width(); 
        img.children(".details").css({
          "left":w+"px"
        });
      });
      
      $(".image").hover(function(){
        $(this).children(".details").stop(true).animate({"left":"0px"}, speed);
      }, function(){
        $(this).children(".details").stop(true).animate({"left":$(this).width()+"px"}, speed);
      });
    }
    </script>
    <style>
    .image{
      float: left;
      width: 92%;
      margin: 5px;
      overflow: hidden;
      position: relative;
    }
    
    .image img{
      width: 100%;
      float: left;
    }
    
    .image .details{
      position: absolute;
      width: 100%;
      top: 0px;
      left: 0px;
      font-family:tahoma;
      background-image: url('http://www.retete-super.ro/wp-content/themes/retetesuper/images/Bottom_texture.jpg');
      
    }
    
    .image .details .text{
      padding: 0 3.125% 3.125% 3.125%;
      text-align: left;
      color: #3C3C3C;
      font-size: 0.9em;
      line-height: 1.2em;
    }
    
    .image .details .title{
      display: block;
      padding: 3.125%;
      text-align: left;
      color: #3C3C3C;
      font-size: 1em;
      line-height: 1.2em;
      font-weight: 700;
    }
    .clickable {
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      position: absolute;     
      z-index: 1;
    }
    </style>
    
    <!-- iar de aici in jos cate poze vrei tu.... -->
    
      <div class="image">
        <img src="http://www.retete-super.ro/wp-content/uploads/2012/12/Salata-exotica-cu-nuci.jpg" />
    <a href="http://www.retete-super.ro/salata-exotica-cu-nuci/"><span class="clickable"></span></a>
        <div class="details">
          <div class="title"> Salata exotica cu nuci </div>
          <div class="text">
    
    Ingrediente:
    2 fructe de mango
    2 fructe de papaya
    3 kiwi
    1 pepene fara samburi
    5 l.s. stafide
    4 cl rom alb
              
          </div>
        </div>
      </div>
    
      <div class="image">
        <img src="http://www.retete-super.ro/wp-content/uploads/2012/12/tort-cu-capsuni.jpg" />
    <a href="http://www.retete-super.ro/tort-cu-capsuni/"><span class="clickable"></span></a>
        <div class="details">
          <div class="title"> Tort cu capsuni</div>
          <div class="text">
    Ingrediente (pentru circa 12 felii): Pentru aluatul faramicios – 100 g unt,
    
    50 g faina, 20 g zahar, 1 zahar vanilat, 
          </div>
        </div>
      </div>
    <div class="image">
        <img src="http://www.retete-super.ro/wp-content/uploads/2012/12/amandina.jpg" />
    <a href="http://www.retete-super.ro/amandine/"><span class="clickable"></span></a>
        <div class="details">
          <div class="title"> Amandine</div>
          <div class="text">
              Ingrediente:
    
    Blat:
    
    7 oua
    
    14 linguri zahar
    
    3 linguri apa
    3 linguri ulei,
    
    2 linguri cacao
    
    8 linguri faina
    
    1 praf de copt
          </div>
        </div>
      </div>
    <div class="image">
        <img src="http://www.retete-super.ro/wp-content/uploads/2013/02/retete-super-blogroll.jpg" />
    <a href="http://www.retete-super.ro/retete/blogroll/"><span class="clickable"></span></a>
        <div class="details">
          <div class="title"> Retete Super Blogroll </div>
          <div class="text">
    Adauga site-ul tau aici  
    
              
          </div>
        </div>
      </div>
    Last edited by Mittineague; Jun 1, 2013 at 01:45. Reason: added code tags

  2. #2
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved
    Thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •