The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.
Features
- Unobtrusive javascript
- Degrades gracefully if the browser doesn’t support javascript or CSS
- Lightweight (4k packed)
- Displays the thumbnail when the actual image is loaded
- CSS powered - create your own gallery style
- Super fast image browsing since the images are preloaded one at a time in the background
- Can scale thumbnails and crop to fit in thumbnail container
- Can be used with custom thumbnails
- Stylable caption from image or anchor title
- jQuery plugin - takes one line to implement
- Browserproof
- Can adjust the history object and enable the back button in your browser
- Can fire events so you can customize the images behaviour onLoad
Usage
You implement the gallery by doing five simple steps:1. Download the latest jQuery release
2. Download the Galleria plugin and the galleria.css file.
3. Add the following lines inside your
<head> section - Insert this line before <b:skin><![CDATA[/*
- <link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
- And insert these lines after ]]></b:skin>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.galleria.js"></script>
- <script type="text/javascript">
- jQuery(function($) { $('ul.gallery').galleria(); });
- </script>
4. Paste this code in CSS section of your blogspot :
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{color:#888;position:absolute;top:250px;left:3px;width:200px;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:200px;float:left;}
.gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}
.nav{padding-top:15px;clear:both;}
.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}
.nav{position:absolute;top:410px;left:0;}
5. Create a HTML/Javascript widget above blogposts widget and paste the code of gallery in that widget . Or you can open the source code of template ,and insert gallery code directly into your template if you have knowledge of HTML .
<h1>Galleria Demo 02</h1>
<div class="demo">
<ul class="gallery_demo_unstyled">
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
<li><img src="your-image-url" alt="small text showed when you move your mouse over image" title="image title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
</div>
Change images url to your own images url ,change title attribute to image title .
Note : The code in step 4 is CSS code for gallery code in step 5 .You can modify the CSS code in step 4 for changing the appearance of gallery .
Ok ,done .
No comments:
Post a Comment