Question

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!

Answer 1

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>');