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

Тема в разделе "JavaScript", создана пользователем Attyla, 6 сен 2013.

Модераторы: ZiX
  1. Attyla

    Attyla

    Регистр.:
    21 ноя 2012
    Сообщения:
    159
    Симпатии:
    43
    Нужен скрипт на jquery который делел бы это:

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

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

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

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

    HTML:
    </a> 
    Спасибо всем за раннее.
     
  2. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    Код:
    var img = $('div[class="card_cover"] img')
    
    $.each( img, function( i, image ){
    
        if( !/^http/.test( image.src ) ){ // заменить паттерн "http" на свой
           
            $( image ).wrap( '<a href="#" />' ); // заменить ссылку на свою
        }
    })
     
    Attyla нравится это.
  3. Attyla

    Attyla

    Регистр.:
    21 ноя 2012
    Сообщения:
    159
    Симпатии:
    43

    Спасибо, но надо:
    для картинок которые не загруженны на сайте а где-то на другом ресурсе (например хостинг картинок) надо чтобы добавлялось
    Код:
    <a href="http://hostingkartinok/img/54654654" onclick="return hs.expand(this)" class="classx ">
    тут сама картинка <img src="http://hostingkartinok/img/54654654" alt="alt" title="alt">
    </a>
     
    Последнее редактирование: 6 сен 2013
  4. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    если сами паттерн регулярки переписать не можете, приведите пример html блока (вместе с div'ом) с картинкой с вашего сайта и тянущейся с другого.. скорее всего вам /^http/ использовать надо, но не факт.. пример нужен, короче..
     
  5. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
    Как-то так должно сработать..
    Код:
    $('div[class=tabs_screenshots] img[src^=http]').wrap(function(){ 
    return '<a class="highslide" onclick="return hs.expand(this)" href="'+$(this).attr('src')+'"/>'
    });
     
    Attyla нравится это.
  6. Attyla

    Attyla

    Регистр.:
    21 ноя 2012
    Сообщения:
    159
    Симпатии:
    43
    До

    Код:
    <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>


    После

    Код:
    <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 они на моем домене а остальные нет.
     
    Последнее редактирование: 6 сен 2013
  7. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    я правильно понял - вам в ссылку надо 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 " />' );
    });
     
    esche и Attyla нравится это.
  8. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
    Формально, после последнего уточнения.. в частности, блока
    "готовое" решение становится чуть более замороченным, но общее направление не меняется. В этом случае, в варианте от BDSG внутри each сделать дополнительную проверку (test) на наличие имени сайта в image.src
     
    Attyla нравится это.
  9. Attyla

    Attyla

    Регистр.:
    21 ноя 2012
    Сообщения:
    159
    Симпатии:
    43
    Типа такого: если в scr встечается mysite1.ru то пропустить? Но может быть картинка и такого типа: <img src="http:// hostingkartinok.ru/postidmysite1.rupostname79874464.png" alt="alt" title="4">.
     
  10. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    Attyla, всё есть суть - регулярка.. которая тяжела сама по себе.. против прямого сравнения, которое, в вашем случае не применимо.. есть одно "но" - ограничить её поиском х совпадающих байт от начала, или шерстить всю строку - огромная разница.. вам предложено первое (вроде верно по задаче, да?)..

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