Slickr Flickr comes pre-installed with 3 different choices of LightBox as well as the ability to integrate with a number of third party LightBoxes.
Some of the third party LightBoxes do not support all Slickr Flickr’s features; namely photo descriptions (descriptions=”on”) and links to Flickr in the photo title (flickr_link=”on”).
I will endeavour to support more LightBoxes over time but by dint of necessity the pre-installed LightBoxes will always be equally or more functionally rich (from a Slickr Flickr standpoint) than the third party LightBoxes.
The tables below should help with your choice of LightBox:
LightBoxes Pre-Installed With Slickr Flickr
LightBox | Supports Description | Supports Flickr Link in Title | Notes |
---|---|---|---|
Standard LightBox | Has Next and Prev buttons to move from one photo to another | ||
LightBox Slideshow | Plays slideshow automatically | ||
ThickBox | Photo descriptions are placed on the same line as the photo title |
LightBox Plugins Requiring Separate Installation
LightBox | Supports Descriptions | Supports Flickr Link in Title | Notes |
---|---|---|---|
FancyBox | Need to set up custom gallery settings. See notes below. | ||
Highslide | Set Highslide heading source to “None” and caption source to “Link Title” | ||
LightBox Evolution | Need to set “Auto LightBoxing” option to “None” (also you will need to install the latest version of Evolution LightBox that supports at least jQuery 1.6) | ||
LightBox Plus (a.k.a. ColorBox) | LightBox Plus puts the navigation links on the same line as the caption so there is not much room. However, this will work with a short title, a short description and a large lightbox. | ||
ShadowBox | To use photo descriptions then you will be need to override or remove the height restriction of 26px on #sb-title, #sb-title-inner elements in shadowbox.css | ||
ShutterBox | Need to use the shutterset option to allow mulitple galleries per page. | ||
SlimBox | Nothing to report – it just works! | ||
WP Pretty Photo | Need to click the “Show Title” checkbox – also note that all galleries on the page get lumped into a single slideshow in the lightbox |
Notes
* – On the FancyBox Plugin Settings Gallery tab, click the option “Use a custom expression to apply FancyBox” and then enter the expression:
[code]jQuery(thumbnails).filter(function(){ return !jQuery(this).parents(".slickr-flickr-gallery");}).addClass("fancybox").attr("rel","fancybox").getTitle();[/code]
One Slickr Flickr user helpfully recommended this expression in preference to the above:
[code]
var posts = jQuery(‘.post’);
posts.each(function() {
jQuery(this).find(thumbnails).addClass("fancybox").attr(
‘rel’, ‘fancybox’+posts.index(this)).getTitle();
});
[/code]
How Slickr Flickr Passes The Photo Title and Description to the LightBox
Slickr Flickr creates a photo caption as follows:
- If flickr_link=”on” then the caption contains the photo title as the link text of a link to photo’s page on Flickr
- if flickr_link=”off” or is not defined the caption contains just the plain version of the photo title
Slickr Flickr then passes information to the lightbox as follows:
- anchor title attribute contains photo caption followed by photo description
- image title attribute contains photo title
- image alt attribute contains photo description
Most lightboxes can handle this information but some make assumptions that the anchor title is pure text and hence format the gallery or the lightbox badly.
IMPORTANT: Only Activate A Single LightBox
Make sure you only activate a single LightBox and then set up the LightBox option in Slickr Flickr Admin Settings to reflect that choice.
If you have more than one lightbox activated you will typically either get javascript errors and instead of getting the image in a lightbox the image with appear in a new tab on your browser.
Russell says
Thanks for your comments. I will add an article for this, and if necessary add to the plugin
Wouters says
I know this is a really old faq but, I had some trouble using slickr flickr when using Fancybox 3. And here is how to make it work with slickr flickr.
if ($(“body”).hasClass(“single”) == true) {
$(‘.fancybox’).attr(‘data-fancybox’, ‘images’);
}
Fancybox 3 works with data attributes so adding the correct data attribute to the class ‘fancybox’ you’ll make Fancybox 3 work with slickr Flickr…
Russell says
See http://www.slickrflickr.com/support/descriptions-not-showing-on-the-galleria/
Only pictures 1, 3,10 and 17 out of the 20 have descriptions.
cd says
this is the shortcode i use.
[slickr-flickr tag="tj-iceland" " type="galleria" captions ="on" descriptions="on"]
Russell says
Cindy,
Do you have the parameter descriptions=”on”
See an example at http://www.slickrflickr.com/2270/flickr-galleria-slide-transitions-now-supported-by-slickr-flickr/ which shows both titles and descriptions for the galleria
cd says
Hi Russel,
I have deactivate that seo image friendly plugin, and now there is only the title and nothing else.
Thanks,
Cindy
Russell says
Hi,
SEO Friendly Images changes photo descriptions (the alt tags) – it is what is causing the problem
Regards
Russell
PS In you are on Facebook please ‘like’ Slickr Flickr in the LikeBox on the right if you like Slickr Flickr
cd says
I think Slickr-flickr picks up correct info, but the info doesn’t get display in the galleria.
I have WordPress 3.2 , slickr-flickr 1.22
Yes I do run SEO plugins All in One SEO Pack, Automatic SEO Links, SEO Friendly Images. How did you figure that out :-)?
Russell says
For example for this photo, http://www.flickr.com/photos/dlakme/5891981404/, Slickr Flickr is picking up the photo description in the RSS Flickr which looks like this:
<p><a href="http://www.flickr.com/people/dlakme/" rel="nofollow">dlakme</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/dlakme/5891981404/" title="Iceland" rel="nofollow"><img src="http://farm7.static.flickr.com/6019/5891981404_7d6cff3ccf_m.jpg" width="240" height="205" alt="Iceland" /></a> <p>The last day</p>
Rather than displaying “the last day ” it is displaying the post title and some number from the image file name.
Are you running an SEO images plugin by any chance?
Also what version of WordPress and Slickr Flickr do you have installed?
cd says
HI
id =36417719@N00
url = http://www.flickr.com/photos/dlakme/tags/tj-iceland
Russell says
Cindy,
I also need your Flickr ID or your URL on Flickr to check what it looks like on Flickr…
cd says
Hi Russels,
I used the tag “tj-iceland” . I can only manage to get the correct photo’s flickr title but not description. I’m very happy with almost everything about this plugin. Thanks for developing it… The only thing is the flickr’s description.
Many thanks,
Russell says
Hi Cindy,
Thanks for your questions
‘Captions’ are populated with the Flickr Photo Title; ‘Descriptions’ are populated with the Flickr Photo Description. The title is typically short and is text; the description can contain HTML.
However, the slideshow, galleria (plus galleria theme) and lightbox each handle this information differently in how they display it.
Most put the description immediately beneath the caption; other put the caption above the photo and the description beneath the photo. Slickr Flickr has a feature that allows you to make the photo title(caption) a clickable link through to the photo on Flickr (flickr_link=”on”) if the lightbox support this.
As for the numbers in the photo description, what is your Flickr ID and what tag/set/gallery are you using for your Iceland photos?
cd says
Hi,
Could some one please explain to me what is the difference between ‘descriptions’ and ‘captions’ used in this context? Also can Slickr-flickr get the image’s description on Flickr? I’ve been having trouble trying to get this visible. Please see my gallery http://www.traveljo.com/photos-of-iceland-45tth-country/
The image’s description/caption (when lick on the ‘i’ button) shows something funny: string of number + the post title.
Many thanks for advising.
Cindy
Russell says
In both free and Pro editions :
– if you use the type=”gallery” you have a lightbox – click on a thumbnail and larger photo pops in the lightbox
– if you use flickr_link=”on” the photo caption (in slideshow or lightbox) is a link to the photo on Flickr
– if you specify type=”gallery” and lightbox=”none” clicking on the thumbnail takes you to the photo on Flickr
– if you specify link=”some url” on the slideshow then clicking on the slideshow takes you to that link
In Pro Edition only
– if you use type=”slightbox” you get a slideshow with a lightbox(e.g small slideshow in sidebar with clickthrough to larger photos) – see slightbox example at http://www.slickrflickr.com/support/slideshow-lightbox/
Russell says
Hi Rick,
Try adding the following to your style.css file
.textwidget .slickr-flickr-slideshow.landscape.small { margin-bottom: -20px; }
This line kills off the white-space.
Also you have a 404 error on the page for this line
<link rel="stylesheet" href="http://onyxmediaservices.com/wp-content/themes/OnyxMediaServices/style-.css" type="text/css" media="screen">
Rick Upshaw says
Russell,
I’d also like to know if your plugin (either the free or pro version) allows for the function of clicking on the image to either go to the image on Flickr, or to see a larger version of the image. Is any of that possible?
Rick Upshaw
Rick Upshaw says
Russell,
I tried that. You can check out the link again to see the result. While it does significantly reduce the size of that space underneath the presentation, it doesn’t get rid of it. It’s still obvious that something is wrong underneath the slideshow. I see that on your site, you don’t have this problem, so other than the theme being different, what else could be wrong?
For your convenience, here is the link again:
http://onyxmediaservices.com/resources
Rick Upshaw
Russell says
Rick,
Try adding size=”small” as uses smaller Flickr photos and sets the slideshow container size more appropriately.
With the Slickr Flickr Pro edition you can use “height” and “width” parameters which allows custom sizes however your photos look pretty standard landscape so probably not required.
Regards
Russell
Rick Upshaw says
Russell,
I am having troubles with your plugin in a sidebar widget, and can’t figure out why. I only heard about your plugin a day ago, and I’m willing to try it, use it, and even buy the pro version or developer’s license for it if I can make it work right. However, I obviously want to know that I can make it work before I do any of that.
For some reason, when using your plugin in a text widget, and using the medium-sized pictures for a slideshow option, a really large blank area is coming up underneath the slideshow. It is the same with the latest versions of Chrome and Firefox, as well as in Internet Explorer 8, all in Windows XP. I have also tried it using all three lightbox versions already installed as well as with Lightbox Plus. Here is a link to the page:
http://onyxmediaservices.com/resources
So am I doing something wrong?
Please get back to me on this right away. I have to have this function up and running TODAY, so if your plugin won’t work for some reason, I’ll need to try to come up with something else. I really like how your plugin works, though, so I’m really hoping you can help me resolve this quickly.
Regards,
Rick Upshaw
Chazzer says
Thanks for your efforts, Russell.
Still can’t get wp-prettyPhoto to behave with Slickr-Flickr. Hey-ho. Life’s too short. Implemented Lightbox Plus instead. Works like a dream.
Russell says
Hi Chazzer
I spent a couple of hours on this and could not get the gallery feature to work reliably. On my site WP Pretty photo would go into an infinite loop and produce thousands of javascript errors.
WP Pretty photo has quite a lot of settings and am I yet to stumble upon a combination that works.
If you try setting the Slickr Flickr Admin LightBox option to “Lightbox Plus” then Slickr Flickr produces a gallery of thumbnails with rel=lightbox[number] -according to WP Pretty Photo documentation you should be able to set the WP Pretty Photo configuration that works a gallery of thumbnails that have rel=lightbox[n].
Chazzer says
Seems to be an issue with WP-prettyPhoto. Each image seems to be a separate gallery as there is no ‘prev’ ‘next’ option to move to adjacent images. Needs to be able to group images in a gallery so that wp-prettyPhoto can recognise as a collection.
This point has been mentioned elsewhere on your site, but no solution so far.
Russell says
HI Michelle,
I should maybe explain further – Slickr Flickr uses two methods to access Flickr photos; one using Flickr RSS and another using the Flickr API. With Flickr RSS I was adding paragraph tags but with Flickr API I was not adding paragraph tags to the Flickr photo description – from Slickr Flickr 1.29 onwards paragraph will be applied whichever access method is used.
Michelle says
Thanks very much, Russell! I am rather stumped as to how that could happen, given that the description data is pulled in from Flickr, which wouldn’t allow me to screw up the formatting even if I wanted to! But anyway, I’m glad to hear you can fix it easily – much appreciated!
Russell says
Hi Michelle,
I will fix this in the next release which is later today.
In the first gallery of tagged photos the photo descriptions are wrapped in paragraph tags; in the second gallery of photoset photos, the photo descriptions are without paragraph tags. I am making a small change to the code that applies paragraph tags around the photo description if they are missing,
Thanks for bringing this to my attention
Regards
Russell
Michelle says
Hi, here’s a slightly odd lightbox problem which I’m really hoping you might have some insight on. I’ve set my Slickr Flickr admin settings to just use the standard pre-installed lightbox so I don’t think that’s causing the problem.
Essentially, when I first started using this fantastic plugin (thank you!) some time last year, I was able to do a gallery with nicely formatted captions and descriptions on in the lightbox.
However, when I just tried to do another gallery, with almost the same code, the formatting of the descriptions is going wrong in the lightbox.
I’ve made a demo page which contains both galleries. The old gallery still yields a perfect lightbox display, but the new gallery yields a lightbox with the description formatting problem. They are both on the same page and created with almost the same code!
http://syntaxfree.org/blog/test-gallery
Jack says
Thanks again Russell for all your assistance earlier! Now, I’m just attempting get a standard and same lightbox use globally on my site for any photo; wether Slickr Flickr, NextGEn Gallery, or standard WP…
Russell says
The screenshot below shows the conflicting slimstat click event on the right hand side of Chrome’s Inspect Element display. Enjoy!
Thanks for the cake. But it would be better if you could give Slickr Flickr a good rating at http://wordpress.org/extend/plugins/slickr-flickr/
Thank you.
markfrancombe says
Ha! I just disabled the slimstat plugin, and it worked… You know this is just magic right? I really wish I knew the first thing of what you were talking about, Im sure you dont have time to answer but… for example… What did you do to pinpoint that exact script that was causing the problem?
Anyway, please accept this virtual cake…
🙂
Mark
Russell says
Mark,
Javascript conflicts are technical issues so nerdy gibberish is required. Here is some more that I hope is more intelligible.
The issue is NOTHING to do with Slickr Flickr – it is a misconfiguration of your link tracking script
Your link tracker script http://www.markfrancombe.com/wordpress/wp-content/plugins/wp-slimstat/wp-slimstat.js is killing the lightbox by calling the function slimstat_track_link()
You need to configure your tracking script to ignore the lightbox links – ie any link that has <a rel="sf-lbox-manual". Any link tracker worth its salt should be to be configured so you can control what outbound links you want to track and which ones you should ignore.
markfrancombe says
This doesnt work for me. Im aware that I may be experiencing the issue stated as double installation of a lightbox, but the instructions here are suddenly for nerds. (look at the page source.. sorry thats just gibberish to me!)
The functionality Im getting is that, the gallery appears in the post OK, I click and then … for a second I can see the lightbox loading, but then it dumps the picture onto a new page, and not in the lighbox. With certain lightboxes, namely the lightbox with manual slideshow, I get some thing. it first displays the image loose on a page, the blog removed, then IF I HIT THE BACK BUTTON it loads into the lightbox and from there on I can navigate thru the pictures correctly, but the first picture load crashes…
look here!
http://www.markfrancombe.com/wordpress/?p=1017