JQuery 3D изображение + кнопка карусели - PullRequest
Новая
       17

JQuery 3D изображение + кнопка карусели

1 голос
/ 18 ноября 2010

Я ищу 3D-карусель (как, например, http://www.professorcloud.com/mainsite/carousel.htm) , однако Мне нужно, чтобы разрешить изображения с соответствующими кнопками для каждого изображения.

Например: 

<ul><li><img><fb:like></li>
<li><img><fb:like></li>
<li><img><fb:like></li>
<li><img><fb:like></li>
<li><img><fb:like></li></ul>

Мне нужна карусель товаров, и каждому из них нужна соответствующая кнопка Facebook Like . Кажется, что когда я добавляю контент, отличный от прямого изображения, в карусели выше функциональности, нарушается! Пожалуйста, дайте мне знать, если это возможно, или мне просто нужно подтолкнуть креативную команду и сказать, что это невозможно (что, я полагаю, имеет место, поскольку математика для кнопок изменения размера может нарушиться).

Или даже если самый передний бургер, который находится в фокусе, показывает кнопку «FB Like», когда находится спереди. Могу ли я сделать это с помощью одного из плагинов выше? Облачная версия профессора, похоже, не имела «крючка» при возврате того, что было впереди. У меня есть знания jQuery для начинающих и среднего уровня. ;) Спасибо!

1 Ответ

0 голосов
/ 23 ноября 2010

При вводе официального ответа облачная карусель имеет следующую строку кода, которая меняет заголовок в зависимости от того, какое изображение находится впереди: 

$(options.titleBox).html( $(items[fIndex].image).attr('title'));

Используя это в качестве основы, я помещаю URL-адрес страницы в атрибут «data-url» на каждом img в карусели 

<img src='img/myimage.png' data-url='fb-page-name'>

Затем использовал эту строку кода в карусели js, чтобы динамически добавить кнопку FB Like в функцию showFrontText: 

$("p.like").html('<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http://www.facebook.com/'+$(items[fIndex].image).attr('data-url')+'&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:80px; height:80px\" allowTransparency=\"true\"><\/iframe>');
...