Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Flickr photo bar, too cool!

Mick in Tutorials
Dec 26, 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 [html]apply for a Flicker application key.[/html]

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

Tagged with: flickr flickr bar smf 2.0.3 


Mick

Mick G

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 and has a weakness for Tacos and Pizza.

Website: https://www.idesignsmf.com/

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up