Скрипт на jquery который добавляет код до и после картинки

Attyla

Профессор
Регистрация
21 Ноя 2012
Сообщения
160
Реакции
44
Нужен скрипт на jquery который делел бы это:

Выбирает все картинки из div с классом tabs_screenshots

Проверяет если атрибут scr=”” картинки начинается не с указаных параметров (параметры) то изменяет html код картинки (изменяет картинку) :

Добавляет до картинки это:

HTML:
<a href="то что в атрибуте scr  у картинки которая подходит под наши условия или проще сказать находится не на данном сайте " onclick="returnhs.expand(this)" class="classx ">

И после картинки это:

HTML:
</a>

Спасибо всем за раннее.
 
Код:
var img = $('div[class="card_cover"] img')

$.each( img, function( i, image ){

    if( !/^http/.test( image.src ) ){ // заменить паттерн "http" на свой
       
        $( image ).wrap( '<a href="#" />' ); // заменить ссылку на свою
    }
})
 
Код:
var img = $('div[class="card_cover"] img')

$.each( img, function( i, image ){

    if( !/^http/.test( image.src ) ){ // заменить паттерн "http" на свой
    
        $( image ).wrap( '<a href="#" />' ); // заменить ссылку на свою
    }
})


Спасибо, но надо:
для картинок которые не загруженны на сайте а где-то на другом ресурсе (например хостинг картинок) надо чтобы добавлялось
Код:
<a href="http://hostingkartinok/img/54654654" onclick="return hs.expand(this)" class="classx ">
тут сама картинка <img src="http://hostingkartinok/img/54654654" alt="alt" title="alt">
</a>
 
Последнее редактирование:
если сами паттерн регулярки переписать не можете, приведите пример html блока (вместе с div'ом) с картинкой с вашего сайта и тянущейся с другого.. скорее всего вам /^http/ использовать надо, но не факт.. пример нужен, короче..
 
Как-то так должно сработать..
Код:
$('div[class=tabs_screenshots] img[src^=http]').wrap(function(){ 
return '<a class="highslide" onclick="return hs.expand(this)" href="'+$(this).attr('src')+'"/>'
});
 
пример нужен, короче..

До

Код:
<div class="tabs_screenshots">
image tab

    <img src="/img/1.jpg" alt="alt" title="1">
    <img src="/uploads/2.jpg" alt="alt" title="2">
    <img src="http://mysite1.ru/img/3.jpeg" alt="alt" title="3">
    <img src="http://www.mysite1.ru/img/4.jpeg" alt="alt" title="4">
    <img src="http://othersite.com/wbi/08/83/5.jpg" alt="alt" title="5">
    <img src="http://othersite2.ru/wbi/08/83/6.jpg" alt="alt" title="6">
    <img src="http://hostingkartinok/7.jpg" alt="alt" title="7">
    <img src="http://othersite3.net/wbi/08/83/8.jpg" alt="alt" title="8">
    <img src="/images/54654654.png" alt="alt" title="9">
</div>
[/spoil]

После

[spoil]
Код:
<div class="tabs_screenshots">
image tab

    <img src="/img/1.jpg" alt="alt" title="1">
    <img src="/uploads/2.jpg" alt="alt" title="2">
    <img src="http://mysite1.ru/img/3.jpeg" alt="alt" title="3">
    <img src="http://www.mysite1.ru/img/4.jpeg" alt="alt" title="4">

    <a href="http://othersite.com/wbi/08/83/5.jpg" onclick="return hs.expand(this)" class="classx ">
        <img src="http://othersite.com/wbi/08/83/5.jpg" alt="alt" title="5">
    </a>

    <a href="http://hostingkartinok/img/54654654" onclick="return hs.expand(this)" class="classx ">
        <img src="http://othersite2.ru/wbi/08/83/6.jpg" alt="alt" title="6">
    </a>
 
    <a href="http://hostingkartinok/7.jpg" onclick="return hs.expand(this)" class="classx ">
        <img src="http://hostingkartinok/7.jpg" alt="alt" title="7">
    </a>
 
 
    <a href="http://othersite3.net/wbi/08/83/8.jpg" onclick="return hs.expand(this)" class="classx ">
        <img src="http://othersite3.net/wbi/08/83/8.jpg" alt="alt" title="8">
    </a>


    <img src="/images/54654654.png" alt="alt" title="9">
</div>

Картинки 1,2,3,4,9 они на моем домене а остальные нет.
 
Последнее редактирование:
я правильно понял - вам в ссылку надо src картинки вставить?.. если да, то так:
HTML:
var img = $('div[class="card_cover"] img[href^="http"]'); // как справедливо подметил esche

$.each( img, function( i, image ){
   
        $( image ).wrap( '<a href="' + image.src + '" onclick="return hs.expand(this)" class="classx " />' );
});
 
Код:
var img = $('div[class="card_cover"] img[href^="http"]'); // как справедливо подметил esche
Формально, после последнего уточнения.. в частности, блока
<img src="/img/1.jpg" alt="alt" title="1">
<img src="/uploads/2.jpg" alt="alt" title="2">
<img src="Для просмотра ссылки Войди или Зарегистрируйся/img/3.jpeg" alt="alt" title="3">
<img src="Для просмотра ссылки Войди или Зарегистрируйся/img/4.jpeg" alt="alt" title="4">
"готовое" решение становится чуть более замороченным, но общее направление не меняется. В этом случае, в варианте от BDSG внутри each сделать дополнительную проверку (test) на наличие имени сайта в image.src
 
Формально, после последнего уточнения.. в частности, блока

"готовое" решение становится чуть более замороченным, но общее направление не меняется. В этом случае, в варианте от BDSG внутри each сделать дополнительную проверку (test) на наличие имени сайта в image.src
Типа такого: если в scr встечается mysite1.ru то пропустить? Но может быть картинка и такого типа: <img src="http:// hostingkartinok.ru/postidmysite1.rupostname79874464.png" alt="alt" title="4">.
 
Attyla, всё есть суть - регулярка.. которая тяжела сама по себе.. против прямого сравнения, которое, в вашем случае не применимо.. есть одно "но" - ограничить её поиском х совпадающих байт от начала, или шерстить всю строку - огромная разница.. вам предложено первое (вроде верно по задаче, да?)..

единственно что мне в решении esche не понравилось, так это callback фактически в цикле (esche, загляни в реализацию each и возрыдай, я тоже не прав, но хоть без обратки).. тяжело.. тут вообще гораздо более легким православным for'ом обойтись можно..
 
Назад
Сверху