SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [jquery] image slider

    Hi

    How can I create an image slider similar to the one on the tumblr login page?

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    I see no sliding images on the login page @ Tumblr. What exactly are you referring too?

  3. #3
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am new to Jquery.
    This code is working in Firefox 4.0b9 and Konqueror 4.5.5
    Code:
      
    <html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hat sanatı örnekleri</title>
    <style type="text/css">
    #pano {position: absolute;top:161px; left: 100px;background-color:gold; border:10px solid gold; }
    img { width: 161px; height: 100px;  }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
    <h3>click images</h3>
    <div id="pano"> 
    <img  id="r1" src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
    <img  id="r2" src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
    <img  id="r3" src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
    <img  id="r4" src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
    </div>
    
    <script type="text/javascript">
    //http://www.sitepoint.com/forums/showthread.php?817851-jquery-image-slider&
    // http://www.w3schools.com/jquery/jquery_effects.asp
    $(document).ready(function(){
    $('#r2').hide();
    $('#r3').hide();
    $('#r4').hide();
    });
    
    
    $('#r1').click(function() {
    $(this).hide(4000);
    $('#r2').show(5000);
    });
    $('#r2').click(function() {
    $(this).hide(2000);
    $('#r3').show(7000);
    });
    $('#r3').click(function() {
    $(this).hide(3000);
    $('#r4').show(2000);
    });
    $('#r4').click(function() {
    $(this).hide(5000);
    $('#r1').show(6000);
    });
    
    </script>
    </body>
    </html>
    I wrote
    $(this).slideUp("slow");
    instead of these
    $(this).hide(number);

    or
    $(this).hide();
    instead of these
    $(this).hide(number);

    and
    $(this).show();
    instead of these
    $(this).show(number);
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  4. #4
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using setTimeout
    This code is working in Firefox 4.0b9 and Konqueror 4.5.5
    Code:
      
    <html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hat sanatı örnekleri</title>
    <style type="text/css">
    #pano {position: absolute;top:161px; left: 100px;background-color:gold; border:10px solid gold; }
    img { width: 161px; height: 100px;  }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
    <div id="pano"> 
    <img  id="r1" src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
    <img  id="r2" src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
    <img  id="r3" src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
    <img  id="r4" src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
    </div>
    
    <script type="text/javascript">
    //http://www.sitepoint.com/forums/showthread.php?817851-jquery-image-slider&
    // http://www.w3schools.com/jquery/jquery_effects.asp
    
    $(document).ready(function(){
    $('#r2').hide();
    $('#r3').hide();
    $('#r4').hide();
    });
    var A = ['#r1','#r2','#r3','#r4'];
    var B = ['#r2','#r3','#r4','#r1'];
        var i = 0;
        (function sonraki() {
          setTimeout(function() {
            if (i==A.length) {i=0}
              $(A[i]).hide(); $(B[i]).show(); i++;
              sonraki();
           
          }, 3000);
        })();
    
    
    </script>
    </body>
    </html>
    I try this:
    $(A[i]).hide(1000); $(B[i]).show(1000); i++;
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.


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
  •