По умолчанию моя страница загружает категории с изображениями из /thumb-min/
folder, например 95-IMG_6509.JPG
так это:
/thumb-min/95-IMG_6509.JPG
на странице подробной информации:
/thumb-medium/95-IMG_6509.JPG
Итак, при опрокидывании я хотел бы изменить /thumb-min/95-IMG_6509.JPG на /thumb-medium/95-IMG_6509.JPG
я хотел бы сделать hover ZOOM IN effect
но не знаю, как применить его на моем сайте. спасибо
Сделайте что-то вроде этого:
<img src="/thumb-min/95-IMG_6509.JPG"
data-src="/thumb-medium/95-IMG_6509.JPG" class="rollover" />
В JavaScript используйте это:
$(document).ready(function(){
$(".rollover").hover(function(){
rollover = $(this).attr("src");
$(this).attr("src", (this).data("src"));
$(this).data("src", rollover);
}, function(){
rollover = $(this).data("src");
$(this).data("src", $(this).attr("src"));
$(this).attr("src", rollover);
});
});
Или более простой способ:
$(document).ready(function(){
$(".rollover").hover(function(){
$(this).attr("src", $(this).attr("src").replace("thumb-min","thumb-medium"));
}, function(){
$(this).attr("src", $(this).attr("src").replace("thumb-medium","thumb-min"));
});
});
Для эффектов Zoom In существует много плагинов jQuery. Посмотрите этот imgPreview, который лучше всего подходит для вас!
Попытайтесь, я предоставил логику. По мере того, как она вам помогает, при наведении вы можете заменить источник изображения на свой thumb-medium
и обновить его в своем источнике изображения
var str = "/thumb-min/95-IMG_6509.JPG";
var res = str.replace("thumb-min","thumb-medium");
$('#your image Id').attr("src", res);