You are here: Documentation » Tips, Tricks, Tutorials, and Screencasts » Flickr Lightbox
Differences
This shows you the differences between two versions of the page.
tutorial:flickr_lightbox [2007/08/24 03:24] admin created |
tutorial:flickr_lightbox [2011/03/06 03:56] (current) |
||
---|---|---|---|
Line 4: | Line 4: | ||
Having mentioned that there are lots and lots of variations, one of the more popular ones is [[http://www.huddletogether.com/projects/lightbox2/|Lightbox 2]] created by Lightbox's original author. Many of the photo-only variations of Lightbox are compatible with the original Lightbox HTML, so this is what we'll be creating. Feel free to tweak and adjust as the instructions for whichever 'box you're using dictates. | Having mentioned that there are lots and lots of variations, one of the more popular ones is [[http://www.huddletogether.com/projects/lightbox2/|Lightbox 2]] created by Lightbox's original author. Many of the photo-only variations of Lightbox are compatible with the original Lightbox HTML, so this is what we'll be creating. Feel free to tweak and adjust as the instructions for whichever 'box you're using dictates. | ||
- | :!: This tutorial assumes that you're already familiar with using SimplePie, including looping through items. This is only sample code, and you should not create real pages using the (horrid) HTML generated by this example. | + | This tutorial was partially inspired by http://www.eleven3.com/2006/07/using_flickr_magpie_and_lightb.php |
+ | |||
+ | :!: This tutorial assumes that you're already familiar with using SimplePie, including looping through items. | ||
===== Notes ===== | ===== Notes ===== | ||
Line 80: | Line 82: | ||
?></code> | ?></code> | ||
- | ==== Example Code ==== | + | ==== Example "Full Page" Code ==== |
<code html><?php | <code html><?php | ||
require_once('simplepie.inc'); | require_once('simplepie.inc'); | ||
Line 117: | Line 119: | ||
<?php | <?php | ||
foreach ($feed->get_items() as $item): | foreach ($feed->get_items() as $item): | ||
- | // We should NOT use the enclosure URL, as this is the 'Original' size we mentioned had issues. | + | |
- | // Parse the description for the <img> | + | // Set some variables to keep the rest of the code cleaner. |
$url = lightbox::find_photo($item->get_description()); | $url = lightbox::find_photo($item->get_description()); | ||
+ | $title = lightbox::cleanup($item->get_title()); | ||
+ | $full_url = lightbox::photo($url, $full); | ||
+ | $thumb_url = lightbox::photo($url, $thumb); | ||
?> | ?> | ||
- | <a href="<?php echo lightbox::photo($url, $full); ?>" title="<?php echo lightbox::cleanup($item->get_title()); ?>" rel="lightbox"> | + | <a href="<?php echo $full_url; ?>" title="<?php echo $title; ?>" rel="lightbox"> |
- | <img src="<?php echo lightbox::photo($url, $thumb); ?>" alt="<?php echo lightbox::cleanup($item->get_title()); ?>" border="0" /> | + | <img src="<?php echo $thumb_url; ?>" alt="<?php echo $title; ?>" border="0" /> |
</a> | </a> | ||
Line 130: | Line 135: | ||
</body> | </body> | ||
</html></code> | </html></code> | ||
+ | |||
+ | |||
+ | ==== Example "Add it to an existing page" Code ==== | ||
+ | **Assumes:** | ||
+ | - You've already got a page... | ||
+ | - ... with a Lightbox of some sort already installed... | ||
+ | - ... and your page is set to UTF-8... | ||
+ | - ... and you're not already including SimplePie somewhere else in the page. | ||
+ | |||
+ | <code php><?php | ||
+ | require_once('simplepie.inc'); | ||
+ | require_once('flickr_lightbox.inc'); | ||
+ | |||
+ | $feed = new SimplePie('http://api.flickr.com/services/feeds/photos_public.gne?id=33495701@N00&lang=en-us&format=atom'); | ||
+ | |||
+ | $thumb = 'square'; | ||
+ | $full = 'medium'; | ||
+ | |||
+ | foreach ($feed->get_items() as $item): | ||
+ | $url = lightbox::find_photo($item->get_description()); | ||
+ | $title = lightbox::cleanup($item->get_title()); | ||
+ | $full_url = lightbox::photo($url, $full); | ||
+ | $thumb_url = lightbox::photo($url, $thumb); | ||
+ | ?> | ||
+ | |||
+ | <a href="<?php echo $full_url; ?>" title="<?php echo $title; ?>" rel="lightbox"> | ||
+ | <img src="<?php echo $thumb_url; ?>" alt="<?php echo $title; ?>" border="0" /> | ||
+ | </a> | ||
+ | |||
+ | <?php endforeach; ?> | ||
+ | </code> |
tutorial/flickr_lightbox.1187925892.txt.gz · Last modified: 2011/03/06 03:56 (external edit)