Получите имя и сделайте ссылку из <img>с помощью jQuery

Question

С помощью jQuery я хочу сделать все изображения по определенному пути на сайте, кликабельном и показывающем большое изображение, используя Fancybox , который является маякомвариант плагина для jQuery.

Мои маленькие изображения находятся в "images / products / small" , большие - в "images / products / big" иimagename всегда одинаково

На странице показано изображение со следующим кодом:

<img src="images/products/small/hat.jpg" alt="Nice hat">

Мне нужен скрипт jQuery, который превращает это в:

<a href="images/products/big/hat.jpg" class="fancybox"><img src="images/products/small/hat.jpg" alt="Nice hat"></a>

Может быть, часть с установочным классом для тега ссылки можно пропустить и просто активировать fancybox для элемента напрямую с помощью $ (elm) .fancybox ();

Я искал вокругнемного, и похоже, что функции jQuery "attr" и "wrap" могут быть полезны, но с моими ограниченными в настоящее время навыками jQuery я действительно не могу соединить точки.

Answer 1

Вы хотите найти все изображения, а затем, как вы и подозревали, вы можете использовать wrap, если вы действительно хотите изменить структуру:

$('some_parent_selector img[src*=/small]').wrap(function() {
    return "<a href='" + this.src.replace("/small", "/large") + "' class='fancybox'/>";
});

Живой пример (после того, как вы нажмете кнопку, элементы будут обернуты; это может быть не сразу заметно визуально, но если вы используете Firebug или Dev Tools или даже просто нажимаете на них ...).

Вы были направильный путь с attr, кстати, но бывает, что атрибут src является одним из тех, которые отражаются как свойство объекта DOM HTMLImageElement, поэтому вам не нужно использовать attr.