MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Membuat Gambar Berjalan Dengan jQuery


Preview dari tutorial ini adalah seperti ini :



Agar Anda lebih jelas lagi,
lihatlah DEMO-nya di sini.

Untuk membuat seperti yang demikian,
berikut ini tutorialnya :




1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang ada di bawah ini :

<div id="outerContainer">

<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="URL Link 1 Anda" title="........"><img class="logo" id="........" src="URL Gambar 1 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 2 Anda" title="........"><img class="logo" id="........" src="URL Gambar 2 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 3 Anda" title="........"><img class="logo" id="........" src="URL Gambar 3 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 4 Anda" title="........"><img class="logo" id="........" src="URL Gambar 4 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 5 Anda" title="........"><img class="logo" id="........" src="URL Gambar 5 Anda" alt="........"></a>
</div>
</div>

</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
   
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
   
//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
      
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
    
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 1000;
    
//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
        
//set direction
var direction = "rtl";
    
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
    
//animator function
var animator = function(el, time, dir) {
     
//which direction to scroll
if(dir == "rtl") {
       
//add direction class
el.removeClass("ltr").addClass("rtl");
        
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
            
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
       
//restart animation
animator($(this), duration, "rtl");
       
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
           
});
} else {
     
//add direction class
el.removeClass("rtl").addClass("ltr");
     
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
            
//reset container position
$(this).css({ left:0 - $("div#container").width() });
       
//restart animation
animator($(this), duration, "ltr");
       
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
});
}
}
    
//start anim
animator($("div#container"), duration, direction);
    
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
      
//stop anim
$("div#container").stop(true);
     
//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
     
//variable to hold trigger element
var title = $(this).attr("title");
     
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
    
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
      
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
     
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
              
//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
    
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));

});
            
//handler for ltr button
$("#ltr").live("click", function() {
          
//stop anim
$("div#container").stop(true);
    
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
          
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
     
//restart anim
animator($("div#container"), newDuration, "ltr");
});
    
//handler for rtl button
$("#rtl").live("click", function() {
          
//stop anim
$("div#container").stop(true);
     
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
     
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
    
//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script>

KETERANGAN :

Masukkan Link dan Gambar Anda dalam kode
di atas pada tempat yang disediakan.

Isilah titik-titik pada kode title=", id=" dan alt="
dengan kata atau kalimat yang Anda inginkan.



3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini lalu
      simpanlah template Anda.

<link rel="stylesheet" type="text/css" href="http://nettuts.s3.amazonaws.com/300_jquery/image Scroller/imageScroller.css" />



Selamat mencoba, good luck!


0 comments:

Posting Komentar