Как я могу заменить имя папки на ролловере?

0

По умолчанию моя страница загружает категории с изображениями из /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 но не знаю, как применить его на моем сайте. спасибо

2 ответа

0

Сделайте что-то вроде этого:

<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, который лучше всего подходит для вас!

  • 1
    простой способ потерпел неудачу для меня :) я даю ссылку Expertonly.ru/index.php/katalog
  • 0
    Окей, это нормальный способ работы для тебя?
Показать ещё 4 комментария
0

Попытайтесь, я предоставил логику. По мере того, как она вам помогает, при наведении вы можете заменить источник изображения на свой thumb-medium и обновить его в своем источнике изображения

var str = "/thumb-min/95-IMG_6509.JPG";
var res = str.replace("thumb-min","thumb-medium"); 
$('#your image Id').attr("src", res);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню