Hi
How can I create an image slider similar to the one on the tumblr login page?
Hi
How can I create an image slider similar to the one on the tumblr login page?
I see no sliding images on the login page @ Tumblr. What exactly are you referring too?
I am new to Jquery.
This code is working in Firefox 4.0b9 and Konqueror 4.5.5
<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);
using setTimeout
This code is working in Firefox 4.0b9 and Konqueror 4.5.5
<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++;