Проблема с добавлением наложения изображений (jQuery) - PullRequest
Новая
       9

Проблема с добавлением наложения изображений (jQuery)

1 голос
/ 05 мая 2009

Что я хочу сделать, так это найти все изображения с определенным именем класса и наложить поверх них наложенное изображение. Мой скрипт до сих пор в jQuery 1.2.6: 

jQuery.noConflict();
jQuery(document).ready( function($) {
  var module = $(".module-contactus div div div");
  module.find("img.let").each( function() {
    var iWidth = $(this).width();
    var iHeight = $(this).height();
    var letimg = $('<img src="/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');
    var wrapper = $( '<span style="position: relative; display: inline-block;"></span>' );
    $(this).wrap( wrapper );
    letimg.appendTo( wrapper );
  });
});

letimg не добавляется в документ (согласно Firebug). Элемент span успешно оборачивает исходное изображение. Кроме того, это работает, если я передам $(this) в функцию appendTo, но затем он добавится в исходное изображение!

РЕДАКТИРОВАТЬ: разметка ниже. (Дополнительные div являются следствием Joomla.) 

<div class="module-contactus">
<div><div><div>

<img src="/contact1.jpg" />
<img class="let" src="/contact2.jpg" />

</div></div></div>
</div>

После запуска скрипта второе изображение заменяется на: 

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
</span>

Однако все должно закончиться так: 

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
<img src="/LET.png" style="..." />
</span>

Ответы [ 2 ]

6 голосов
/ 05 мая 2009

Это сработало для меня: 

jQuery.noConflict();
jQuery(function($) {
    $("img.let", $(".module-contactus div div div")).each(function() {
        var iWidth = $(this).width();
        var iHeight = $(this).height();
        var letimg = '<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />';
        var wrapper = $('<span style="position: relative; display: inline-block;"></span>');
        $(this).wrap(wrapper).after(letimg);
    });
});

В качестве примечания. Я вынул пару ваших переменных и сказал бы, что вы, вероятно, продолжите удалять другие (поместите тег img непосредственно в after, обертку непосредственно в функцию wrap и т. Д.). Хотя в любом случае не так уж и много.

0 голосов
/ 05 мая 2009

Я не уверен, что вам вообще нужен упаковщик.

Попробуйте что-то вроде этого. 

jQuery(document).ready( function($) {
    var module = $(".module-contactus div div div");
    module.find("img.let").each( function() {                
        var iWidth = $(this).width();                
        var iHeight = $(this).height();                
        var letimg = $('<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');                
        $(this).before(letimg);         
        alert(module.html());
    });
  });
...