Adding info to slide captions

bszen27

I am looking to add some buttons to the slide caption boxes. I see the div items in single-album.php, but which js file loads the info for these items?

Air

Hello

Slider script is in supersized.3.2.7.js with our extensions in supersized.apollo.js

With regards.

bszen27

Thank you!

I have inserted the following code into line 567 of Spaceship's supersized.apollo.js file (after if(_type == 'image)):

url = 'http://***.com' + window.location.pathname;
imgURL = api.getField('image');
				
social_buttons=''";
// pinterest btn
social_buttons += '<br />';
social_buttons += '<a target="_blank" href="http://pinterest.com/pin/create/button/?url='+url+'&media='+imgURL+'&description='+_title+'" class="pin-it-btn">';
social_buttons += '<img style="max-height:20px; max-width:50px;" id="pinterest_share" src="http://***.com/wp-content/uploads/****/**/pinterest.png" />';
social_buttons += '</a>';
				
//fb like btn
social_buttons += '<a target="_blank" class="facebook-share-btn" href="http://www.facebook.com/sharer/sharer.php?u='+url+'">';
social_buttons += '<img style="max-height:20px; max-width:50px;" id="facebook_share" src="http://***.com/wp-content/uploads/****/**/facebook.png" />';
social_buttons += '</a>';	

I then just concatenate the social_buttons variable onto the description on the current line 579 as follows:

//add desc
if (desc.length && _desc.length){
    desc.show().html(_desc + social_buttons);
    any_text = 1;
}

My problem is that the images don't show up if I click the forward button. They only show up and stay if I hit the back button. Does this have something to do with some sort of caching? This behavior doesn't make a lot of sense to me, especially since the source code shows that the images are there and they appear after hitting the back button. I thought you guys might know, given your experience with the code.

Air

Hello

If you would post live link then I probably could say something what is going on :-) Maybe some CSS for images, but indeed it sounds strange and as now I don't have any idea :-)

With regards.

bszen27

Thanks for your time, Air. I greatly appreciate it. Here is the link!

http://www.tracyafitzgerald.com/album/featured-work/

Air

Hi

There is problem, cause script is affecting every img in #supersized. You can try adding such custom CSS

#supersized .descpription img {
    position: static !important;
}

Hope that helps.

With regards.

bszen27

Air, you rock! Any idea why the social buttons are stacking on top of each other? I tried to display them inline, but that didn't help? It would make more sense to be able to put them side by side, because I could easily add more social sharing buttons without taking up a ton of space.

Anyway... I greatly appreciate you spending the time to help me with this, despite it not being a part of the current theme. Feel free to utilize my code or elements of it if someone asks you a similar question. Thanks again!!!

Air

;-) Thanks a lot!

Same story as previously, slide CSS is overwriting. Use such custom CSS:

#supersized .descpription a {
    display: inline-block;
    height: auto;
    width: auto;
}

With regards.

unaghi

Hello bszen!
I was having the same issue as you and your posts helped me a lot.
Thank you very much for that!
There's one thing though: when I hit Pinterest's button it selects the photo on screen. But when I hit Facebook's button it selects the whole album and I'm not able to share the photo I want. I saw that the same thing happens with your website.
The difference is that on your website I can select the thumbnail when posting it on Facebook.
Any clues on how to solve that?
Thanks again!

bszen27

@unaghi: Thanks for the support! I have updated the code since my first post so that I use 'imgURL' rather than 'url' when using the Facebook Share. That was just an oversight on my part, because I wanted to share the individual image and not just the album. The thumbnail normally appears on the Share screen, but it is sometimes buggy. Here is the updated code, including the addition of a Tumblr share button (which requires encoding):

if(_type == 'image'){
			
/*Added code for social buttons*/
				
//set full current url
url = document.URL;  
//set root url
root = location.protocol + '//' + location.host;  
//set individual image url
imgURL = api.getField('image');
								
social_buttons='';
// Pinterest button
social_buttons += '<br /><br />';
social_buttons += '<a target="_blank" href="http://pinterest.com/pin/create/button/?url='+url+'&media='+imgURL+'&description='+_title+'" class="pin-it-btn">';
social_buttons += '<img style="max-height:20px; max-width:40px;" id="pinterest_share" src="'+root+'/wp-content/uploads/2014/05/pinterest.png" />';
social_buttons += '</a>';
				
// Facebook button
social_buttons += '<a target="_blank" class="facebook-share-btn" href="http://www.facebook.com/sharer/sharer.php?u='+imgURL+'">';
social_buttons += '<img style="max-height:18px; max-width:57px;" id="facebook_share" src="'+root+'/wp-content/uploads/2014/05/facebook.png" />';
social_buttons += '</a>';	
				
// Tumblr button				
encodedImgURL = encodeURIComponent(imgURL);
encodedTitle = encodeURIComponent(_title);
encodedURL = encodeURIComponent(url);
tumblrURL = "http://www.tumblr.com/share/photo?source="+encodedImgURL+"&caption="+encodedTitle+"&clickthru="+encodedURL;
social_buttons += '<a target="_blank" class="tumblr-share-btn" href="'+tumblrURL+'">';
social_buttons += '<img style="max-height:20px; max-width:81px;" id="tumblr_share" src="'+root+'/wp-content/uploads/2014/05/tumblr.png" />';
social_buttons += '</a>';
//*******************************//
				
//if there is defined place for text
if(text_area.length){

Air

This is cool :-) I will think about ading this solution in next update :-)

With regards.

bszen27

Sounds awesome! A couple things to note:

Just remember that the image buttons (and therefore media image urls) are unique to my installation. So they obviously must be included as a part of the update. I attached the buttons I used, but maybe you can find ones that fit the Spaceship theme a little better. I like the colored ones, because they stand out more.

Also, the max heights & widths are vital, because the images blow up to 100% (I believe) without them due to the responsiveness of the theme. You might want to consider including the whole piece of code I wrote in a "getSocialButtons()" function as well.

All easy edits that you probably know already, but I figured I would mention it anyway to save the work on your end if you decide to include it.

Air

Thanks for all your tips :-)