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
    SitePoint Addict
    Join Date
    Aug 2006
    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);
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    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++;
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.


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
  •