jQuery Fancybox — попытка изменить URL изображения после нажатия

#javascript #jquery #image #hover #fancybox

#javascript #jquery #изображение #наведите курсор #fancybox

Вопрос:

Я новичок на сайте и относительно новичок в ASP.NET (по крайней мере, в коммерческом плане).

Здесь немного забавная проблема. Я использую несколько плагинов jQuery на одной странице. То, что я пытаюсь сделать, это показать предварительный просмотр уменьшенного изображения при наведении курсора мыши на изображение, а затем переключить изображение на другое после нажатия и показать это изображение в FancyBox — 3 отдельных изображения, если хотите (назовем их A, B и C). Все это помещается в слайдер (еще один плагин jQuery).

Мне удалось заставить изображение зависать внутри слайдера и даже в модном окне для одного и того же изображения; т.Е. ImgB зависает, а ImgB отображается в модном окне. Проблема в том, что я не могу переключиться на imgC при нажатии и отображении FancyBox. Проблема в том, что как для кода предварительного просмотра изображения, так и для FancyBox требуется тег <‘a’> , который, очевидно, не может быть вложен друг в друга. Мой код Javascript выглядит следующим образом:

 <script type="text/javascript">
    $(document).ready(function() {           

        $("a#imgB").fancybox();

    });
</script>
  

Мой код html-изображения выглядит следующим образом:

 <a href="image/imgB" class="preview" id="imgB">
    <img src="image/imgA" alt="Image A">
</a>
  

Приведенный выше код отображает изображение «ImgB» при наведении курсора и отображает то же изображение в FancyBox после нажатия. Что я хочу сделать, так это оставить наведение как есть, но переключить изображение FancyBox на другое — imgC — после нажатия. Согласно веб-сайту FancyBox, вы можете принудительно изменить HREF, изменив параметр HREF. Я попробовал несколько вариантов, в том числе этот:

 $("a#imgB").fancybox({
   'href': href.replace('image/imgC.jpg')           
});
  

Но, к сожалению, это не работает. У меня такое чувство, что это что-то действительно простое, что бросается мне в глаза, но я не могу понять. Я был бы благодарен за любую помощь.

Спасибо!

Ответ №1:

Исправлено простым изменением скрипта:

 $("a#imgB").fancybox({
  'href': 'image/imgC.jpg'           
});
  

Похоже, это было слишком сложно. Д’о! :о)

Ответ №2:

Можете ли вы изменить плагин наведения, чтобы вместо него использовать контейнер div? Я не думаю, что должна быть причина, по которой вы можете только навести курсор на ссылку

Комментарии:

1. Спасибо за ваш комментарий. Вы имеете в виду изображение, вложенное в div? Ему необходимо знать URL изображения для отображения при наведении курсора мыши. Я пробовал вложить внутри div, но это не работает. Возможно, пришло время попробовать другой плагин для наведения

2. Я имею в виду наличие изображения в div (наведение) в a (щелчок). А затем поместите ссылку в атрибут alt наведенного div. Я не знаю, будет ли это работать с вашим плагином наведения