Implementing PhotoViewer in Blogger

PhotoViewer is a Lightbox based on the extremely popular YUI(Yahoo UI) Framework.It is now obsolete.Some of its features are:

>Load your Flickr RSS feed
>Lightbox functionality, modal dialog and auto-centered panels
>Slide show configuration models
>Cross-browser, cross-platform compatibility
>Create galleries using existing HTML
>Create galleries using remote XML files
>Quick set-up time, endless configuration options
>Light weight for the flexibility

             

Steps to Add it to Blogger:




1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

2.Go to the Post/Page you want to add PhotoViewer and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

4.Now for adding the images into PhotoViewer ,Firstly add the image normally using Insert Image Button




Now When you see the code in the edit HTML window it would be something like this


<a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>


Make it like this


<div id='SomeName'>
<a class="photoviewer" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>
</div>


As you see we only added class="photoviewer" and enclosed it inside a div tag


After this add a snippet to link it to the plugin as following:

<script type="text/javascript">
// config 
YAHOO.photoViewer.config = {
 viewers: {
  "SomeName" : {
   properties: {
    id: "lb1",
    grow: 0.2,
    fade: 0.2,
    modal: true,
    dragable: true,
    fixedcenter: true,
    loadFrom: "html",
    position: "absolute",
    easing: YAHOO.util.Easing.easeBothStrong
   }
  }
 }
};
</script>

5.Now save the Post/Page.




Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!




Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.