Элемент эталонного изображения qTip - PullRequest
Новая
       11

Элемент эталонного изображения qTip

0 голосов
/ 13 мая 2011

Эй, я использую плагин Jquery под названием qTip для создания эффекта прокрутки изображения на куче миниатюр.Мне нужно получить src тега изображения, который был перенесен, и мне трудно найти примеры этого.Я подумал, что $(this).src будет работать, но он ссылается на всплывающую подсказку вместо изображения.Есть идеи?

Ответы [ 2 ]

3 голосов
/ 13 мая 2011

Вопрос в том ... Когда вы пытаетесь получить исходный код и каковы ваши настройки инициализации HTML и qTip?Какую версию qTip и jQuery вы используете?Ответы на эти вопросы будут определять, как вы делаете то, что вы хотите сделать.Я предполагаю, что вы используете qTip2.

Инициализация с помощью цикла $ .each () изменяет значение $ (this) для ссылки на цель, и, вероятно, это то, что вы ищете.Но обратите внимание, что в обратных вызовах событий вы, вероятно, должны использовать API: 

$(document).ready(function()
{
    $('img.thumbnail').each(function() {
        $(this).qtip({
            // within an $.each() loop, $(this) refers to the trigger/target
            content: $(this).attr('src'),
            events: {
                show: function(event, api) {
                    // To reference the original trigger, use the
                    // API's elements property to get a reference
                    // to the trigger
                    alert(api.elements.target.attr('src'));
                }
            }
        });
    });
});

Если вы хотите найти что-то в рендеринге qTip, вы также можете использовать API, поскольку он имеет ссылки на объекты практически для каждогочасть всплывающей подсказки.Например: 

 api.elements.content.find('img').attr('src');

Возвращает все атрибуты src для изображений в самой отображаемой подсказке.

Подробнее см. В документации:

http://craigsworks.com/projects/qtip2/docs/api/#elements

Вот рабочий пример вышеприведенного на jsFiddle.net:

http://jsfiddle.net/kiddailey/AAaUk/

Обратите внимание, что если вы используете jQuery 1.6 и в зависимости от ваших потребностей, вы можете захотетьзаменить .attr () на .prop ().

0 голосов
/ 13 мая 2011

qTip использует следующую схему div: 

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

Значение, когда вы вставляете img: 

 $('#content a[href]').qtip({
      // Simply use an HTML img tag within the HTML string
      content: '<img src="/projects/qtip/images/owl_small.png" alt="Owl" />'
   });

Вы можете найти его, ища img в .qtip-content для вашего текущего элемента.

Если вы разместите свой код там, где получаете $ (this), мы можем помочь вам немного подробнее со спецификой.

Пример (не видя ваш код) будет: 

var mysrc = $(this).find('.qtip-content img').eq(0).prop('src');
...