Support Forum

  • Page:
  • 1

Linking the photo to its photostream on Flickr

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

13 years 7 months ago
Hi!

Is there a way to link the photos in the popup display to the original image from the photostream on Flickr?

Thanks.

Fred
  • sfd_fred's Avatar
  • sfd_fred
  • Free Extensions
  • 5 posts
  • Karma: 1
The administrator has disabled public write access.
13 years 7 months ago
Hey Fred,

This might not be possible with the way the module works since the content of the popup comes directly from Flickr and those images aren't linked.

Cheers,
Jason.
  • Jason D's Avatar
  • Jason D
  • 6 Month Developer
  • 2957 posts
  • 12 Thanks
  • Karma: 75
The administrator has disabled public write access.
13 years 7 months ago
Thanks for your reply. So I've been looking into the Fancybox documentation and managed almost to do what I wanted. I'm sharing the code here if someone needs the same stuff. Note that I'm using this module to display a photostream (tag search result) and it will only work for that.

you need to edit JFlick.js and replace:
list.append('<li><a href="'+h+'" '+s.attr+' class="'+s.zoom_class+'" rel="'+s.zoom_class+'" title="'+photo['title']+'"><img src="'+t+'" alt="'+photo['title']+'" /></a></li>');

by
var b = '#'+photo['secret'];
list.append('<li><a href="'+b+'" rel="'+s.zoom_class+'" title="'+photo['title']+'"><img src="'+t+'" alt="'+photo['title']+'" /></a><div id="'+photo['secret']+'" style="display:none;"><a href="http://www.flickr.com/search/?q=xxxxxxxxx&m=tags" target="_blank"><img src="'+h+'" alt="'+photo['title']+'" /></a></div></li>');
where xxxxxxxxx is your tag search

I then added some css styling as I couldn't get Fancybox to automatically detect the picture size. In my case I'm using medium size display, so in your template css you can add this:
/* JFlickr popup size */
div#fancy_outer {
width: 300px!important;
height: 250px!important;
}

This is quite crapy code and the logic could be improved based on the lowest part of the logic already present in JFlickr.js . It would have taken me quite a lot more time though and I didn't need it :blush:

Also I find that when you're display a tag stream it makes more sense to link to the stream, rather than the individual photo inside a user's gallery.
  • sfd_fred's Avatar
  • sfd_fred
  • Free Extensions
  • 5 posts
  • Karma: 1
Last Edit: 13 years 7 months ago by sfd_fred. Reason: formating
The administrator has disabled public write access.
13 years 7 months ago
Worked a bit more on this and have now replaced the fixed link by the relevant one based on tag searching.

Where you inserted var b = ..., remove the line and replace by:
//HTML anchor
var b = '#'+photo['secret'];
//New browser window link
var flink = 'http://www.flickr.com/search/?q='+s.tags+'&m=tags&s='+s.sort.substring(0,3);

and then replace the list.append line by:
list.append('<li><a href="'+b+'" rel="'+s.zoom_class+'" title="'+photo['title']+'"><img src="'+t+'" alt="'+photo['title']+'" /></a><div id="'+photo['secret']+'" style="display:none;"><a href="'+flink+'" target="_blank"><img src="'+h+'" alt="'+photo['title']+'" /></a></div></li>');

I guess that was "episode 2" ;)

Fred
  • sfd_fred's Avatar
  • sfd_fred
  • Free Extensions
  • 5 posts
  • Karma: 1
Last Edit: 13 years 7 months ago by sfd_fred. Reason: formating
The administrator has disabled public write access.
13 years 7 months ago
Nice work Fred.

Really appreciate you posting your modifications here. I haven;t had the opportunity to test this yet but once I do I shall have some feedback for you.

Thanks,
Jason.
  • Jason D's Avatar
  • Jason D
  • 6 Month Developer
  • 2957 posts
  • 12 Thanks
  • Karma: 75
The administrator has disabled public write access.
13 years 7 months ago
No problem, that's was Free Software is all about, isn't it? :)

I'm still not understanding why jQuery is not detecting the photo area size correctly. It's probably nothing and forced me to actually updated the css styling so both landscape and portrait photos display without scrollbars and in the middle. More pleasing to the eyes.
/* JFlickr image alignment fix */
div#fancy_outer {width: 320px!important;height: 320px!important;}
div#fancy_div a {width: 250px;height: 250px;display: table-cell;text-align: center;vertical-align: middle;}
div#fancy_div a img {vertical-align: middle;}

And of course this doesn't work well in IE so you need to add those changes:
in JFlickr.js, replace the list.append line again adding a special <span>
list.append('<li><a href="'+b+'" rel="'+s.zoom_class+'" title="'+photo['title']+'"><img src="'+t+'" alt="'+photo['title']+'" /></a><div id="'+photo['secret']+'" style="display:none; "><a href="'+flink+'" target="_blank"><span class="ie"></span><img src="'+h+'" alt="'+photo['title']+'" /></a></div></li>');

and in your IE specific style sheet (don't tell me you don't have one ;) ) :
/*JFlickr image alignment fix  IE specific extras*/
div#fancy_div a {display: block;}
div#fancy_div span.ie {display: inline-block;vertical-align: middle;height: 100%;}

Episode 3 now I guess... B)

Fred
ps: you might want to update your CODE tag display CSS... (and the preview styling is even worth)
  • sfd_fred's Avatar
  • sfd_fred
  • Free Extensions
  • 5 posts
  • Karma: 1
Last Edit: 13 years 7 months ago by sfd_fred.
The administrator has disabled public write access.
13 years 7 months ago
B) Cheers for that Fred. Nice work.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close