Flickr photo bar, too cool!

by Mick in Tutorials on 26 Dec 2012


This photobar can easily integrate into SMF. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.

Demo: Photobar

This gallery uses the Flickr API to pull photo sets from a user's photostream. You need a flickr API key and the username for this to work.  You can

Download the Zip below and unzip the folder to your SMF root.  Create a 'footer' HTML block and make sure the URL paths in the code are correct.

The code:
        <link rel="stylesheet" href="http://path-to/css/style.css" type="text/css" media="screen"/>

<div class="flickr_photobar">
<div id="flickr_overlay" class="overlay" style="display:none;"></div>

<div id="flickr_photopreview" class="photopreview" style="display:none;">
<div class="preview_wrapper">
<div class="preview">
<div class="loading"></div>
<div id="preview_close" class="close"></div>
<span id="large_phototitle"></span>
<!--image-->
<a href="#" id="preview_img_next" class="img_next"></a>
<a href="#" id="preview_img_prev" class="img_prev"></a>
</div>
</div>
</div>
<div id="photobar" class="photobar">
<div class="thumbs albums" id="sets">
<a href="#" class="prev"></a>
<div class="thumbsWrapper">
<ul></ul>
</div>
<a href="#" class="next"></a>
</div>
<div class="thumbs images" id="images" style="bottom:-125px;">
<a href="#" class="prev"></a>
<div class="thumbsWrapper">
<ul></ul>
</div>
<a href="#" class="next"></a>
<span class="images_toggle">
Set:
<span id="setName"></span>
<a id="images_toggle">Back to Sets</a>
</span>
</div>
<a id="flickr_toggle" class="toggle">
Flickr Photostream
<span style="visibility:hidden;" class="loading_small"></span>
</a>
</div>

</div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="path-to/jquery.viewport.js" type="text/javascript"></script>
        <script src="http://path-to/jquery.FlickrPhotobar.js" type="text/javascript"></script>


Source: tympanus
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.