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

apply for a Flicker application key.

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:

Code Select Expand

        <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

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

apply for a Flicker application key.

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:

Code Select Expand

        <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

How to add extra menu buttons to Nav bar

Cool descriptions page

Embed Flickr to your website..

Replace Stats Bar Image with CSS

Create easy Progress Bars