WordPress.org

Ready to get started?Download WordPress

Forums

Gallery Carousel Without JetPack
add a faebook like in the carousel (6 posts)

  1. meliandperi
    Member
    Posted 2 years ago #

    Hi. Congratulations for the plugin. I would like to add a facebook like in every image. Is this possbile? if yes where exactly i have to put the code of facebook like button?
    <div class="fb-like" data-href="http://example.com/example.jpg/" data-send="false" data-width="450" data-show-faces="false"></div>

    Thanks in advance

    http://wordpress.org/extend/plugins/carousel-without-jetpack/

  2. tinus2
    Member
    Posted 1 year ago #

    i am sure you and i are not alone when we would like to see some social functionality, at least FB share and P pin...

  3. Syed Balkhi
    Member
    Plugin Author

    Posted 1 year ago #

    The goal of this plugin is to emulate exactly what Jetpack Carousel feature offers without requiring users to connect with WordPress.com

    If you look at the code, this is literally a copy and paste of Jetpack plugin minus the need for authentication. In order to keep it updated with future versions of Jetpack carousel, I am not adding any additional features.

  4. tinus2
    Member
    Posted 1 year ago #

    ok, makes sense from that perspective. as i am not a developer - are there any hooks which one could base a further plugin on to add this functionality?

  5. raisonon
    Member
    Posted 1 year ago #

    Would be ideal - surprised Jetpack doesn't have it... May well be possible with: http://www.addthis.com/labs/photo-sharing

  6. raisonon
    Member
    Posted 1 year ago #

    Well. I nearly did it. Maybe it will inspire someone else to finish the job off.

    I used the addthis method to get the overlay on static images. I did this by adding the addthis class to the image and adding the javascript into the header.

    I then amended the plugins javascript to add an a href="#" and class - both needed to trigger the addthis javascript. But. It didn't work. Here is the code change (line. 741 in jetpack-carousel.js)

    // If the start_index is not 0 then preload the clicked image first.
    			if ( 0 !== start_index )
    				$('<img/></a>')[0].src = $(items[start_index]).data('gallery-src');
    
    			// create the 'slide'
    			items.each(function(i){
    				var src_item        = $(this),
    					attachment_id   = src_item.data('attachment-id') || 0,
    					comments_opened = src_item.data('comments-opened') || 0,
    					image_meta      = src_item.data('image-meta') || {},
    					orig_size       = src_item.data('orig-size') || 0,
    					title           = src_item.attr('title') || '',
    					description     = src_item.data('image-description') || '',
    					caption         = src_item.parents('dl').find('dd.gallery-caption').html() || '',
    					src		= src_item.data('gallery-src') || '',
    					medium_file     = src_item.data('medium-file') || '',
    					large_file      = src_item.data('large-file') || '',
    					orig_file	= src_item.data('orig-file') || '';
    
    				var tiledCaption = src_item.parents('div.tiled-gallery-item').find('div.tiled-gallery-caption').html();
    				if ( tiledCaption )
    					caption = tiledCaption;
    
    				if ( !attachment_id || !orig_size )
    					return false; // break the loop if we are missing the data-* attributes
    
    				title       = gallery.jp_carousel('texturize', title);
    				description = gallery.jp_carousel('texturize', description);
    				caption     = gallery.jp_carousel('texturize', caption);
    
    				var slide = $('<div class="jp-carousel-slide"></div>')
    						.hide()
    						.css({
    							'position' : 'fixed',
    							'left'     : i < start_index ? -1000 : gallery.width()
    						})
    						.append($('<a href="#"><img class="addthis_shareable">'))
    						.appendTo(gallery)

    Good luck!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.