ユーザーに応じて大きな画像を別の画像に置き換えるように JQuery Slider を変更しようとしています。小さな画像にカーソルを合わせると、大きな形式で読み込まれます。
したがって、スクリプトのある時点で、画像の読み込みプロセスがあります。
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
しかし、私がここでやろうとしているのは、src url にいくつかの文字を追加して元の src を変更することです。これにより、ユーザーが画像にカーソルを合わせると、代わりに別の画像がスライダーに読み込まれます (もちろん小さいものに関連します)。 .
たとえば、小さなボックスに product1.jpg があり、ユーザーがその上にカーソルを置いた場合、スライダーに product1Big.jpg をロードしたいと思います。
完全なスクリプトは次のとおりです。
$(function() {
$(".scrollable").scrollable();
$(".items img").hover(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
});