jQuery 3D 图像+按钮轮播

发布于 2024-10-03 08:28:42 字数 747 浏览 7 评论 0原文

我正在寻找 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 知识。 ;）谢谢！

原文

I'm looking for a 3D carousel (like http://www.professorcloud.com/mainsite/carousel.htm) however I need it to allow for images with corresponding buttons for each image.

For example:

<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>

I need a carousel of products and each one needs its corresponding Facebook Like button. It seems that when I add content other than a straight image in the carousels above the functionality breaks! Please let me know if this is possible or if I just need to push back on the creative team and say it isn't possible (which I'm guessing is the case since the math on sizing buttons might break).

Or even if the front-most burger that is in focus then shows it's FB Like button when in front. Can I do that using one of the plugins above? The professor cloud version didn't seem to have a "hook" on returning which item was in front. I'm have beginner to mid-level jQuery knowledge. ;) Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

潜移默化 2024-10-10 08:28:42

输入官方答案，云轮播有这行代码，它根据前面的图像更改标题：

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

使用它作为基础，我将页面的 URL 放在每个 img 的“data-url”属性中carousel

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

然后在carousel js中使用这行代码在showFrontText函数中动态添加FB Like按钮：

$("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>');

Entering the official answer, the cloud carousel has this line of code which changes out the Title depending on which image is in front:

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

Using that as a base, I put the page's URL in a 'data-url' attribute on each img in the carousel

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

Then used this line of code in the carousel js to add the FB Like button dynamically in the showFrontText function:

$("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>');

回复收藏 0 原文

~没有更多了~