Skip to main content

lightbox Image viewer for blogger

Its normally very hard with blogger pages when we click on an image. It opens the image on the browser.
When i roam around to find any alternative to show the pictures on a separate shadow pop-up, I found some cool script which uses scriptaculous and prototype. Follows the steps.

  1. Login to your blogger Layout
  2. Click on Edit HTML
  3. Find the </head> tag and replace it with the following

<!--Light Box Code Starts-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_yJAcOEkSEMz9nY1plUueDm9hAXs6a0pWpd0KLS-LOBCP2tkrwWNSguDFamzeOZI92Xa-8Qfrq0ec54ykqVTr9V69AXDtTjUZzU-zNJee1jiSDalmSIfMPMwV80_ZTV51dEaaPQrdJQ/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiv_400Cc-0KEv58lTiWdFIeMMqvQkpFmtgMpfI2uxvEZdi9qAO3rc_Exfvz0cmp63F9T136P5qbcN5xGsnSj4unLgo4CIbrXSz1sRqGnxfeGI5divmuq_bfVej8t9beLZXBua5DsdcXE/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }        
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://script.aculo.us/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends-->
</head>

Now you have enabled javascript based lightbox.

Google Blogger For Dummies    Creating Unique Websites With Blogger    ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income

To enable this to the images you upload, do the following
  1. Insert Image
  2. Switch the editor to 'Edit HTML'
There is an anchor tag for each of the picture you uploaded.
Insert the following code if you want to open the image as separate one ( there is no next, prev)
rel = "lightbox" title = "Caption of your Image"
Insert the following code, if your image is part of an album (set of images)
 rel = "lightbox[album_name]" title = "Caption of your Image"
Sometimes, the image is too bigger for showing on the window. To handle that, Check the 'href' value of the anchor. There you can find something like '/s1600' (if you found '/s1600-h', remove '-h'). s1600 means the x-large or original size of the image. so you can replace it with '/s640', which is suitable within the monitor.

Examples
  • Single Image


  • Album Images
     










Comments

Popular posts from this blog

VBScript for URL link creation

We had a need to create URL link of our project on users's desktop using a script. First stage the users had enough rights on their PC's so we included the required icon file also with the script and passed the following VBScript to users to click on it to create the desktop icon link. ' Definie shell object Set objWSHShell = WScript.CreateObject("Wscript.Shell") strDesktop = objWSHShell.SpecialFolders("Desktop") ' Copy the icon file to windows Set objFSO = CreateObject("Scripting.FileSystemObject") Set objFileCopy = objFSO.GetFile( objWSHShell.CurrentDirectory&"\icon.ico") objFileCopy.Copy ("C:\WINDOWS\system32\") ' Define link properties and create link strShortcutName = "Log In" ' Shortcut Name - Edit for the wanted name strShortcutPath = "http://thesystem.com/Login.aspx" ' Link URL - Edit to the wanted URL strIconPath = "C:\WINDOWS\syst

VBScript for compressing files in a folder and send on FTP

This is a simple vbscript compression script. works flawlessly on text files even bigger than 15GB. We have a SSIS data generation package installed on our DB server which generates huge data files for data mining operations for current year, current month. The below scripts are doing the rest; compress the files and FTP to the data mining server location.   '====================================================== ' Function : Zip datamart CSV, CTL files to local server for archive purposes. '====================================================== Function WindowsZip(sFile, sZipFile, szPath, szDate)   Set oZipShell = CreateObject("WScript.Shell")    Set oZipFSO = CreateObject("Scripting.FileSystemObject")   Set LogFile = oZipFSO.CreateTextFile(szPath & "\Logs\log_" & szDate & ".log", true)   LogFile.WriteLine("=======================================")   LogFile.WriteLine(Now & " - Com

Round the float

There are 3 types of rounding a float to integer is applicable in any language. we programmers will come across such situation in every project. the three types are, round to next bigger integer, with not considering the decimal value. round to the next smaller integer, with not considering the decimal value. round the float according to the value of decimal value, the real round of float number. The rounding methods depend on which scenario we need the round function. Follows the examples of php rounding methods. for the case 1, rounding to the next big integer, we use  ceil() function Example :  $rounded_value = ceil($floor_value); if rounded the following values, the results are like shown 2 = ceil(1.3) 2 = ceil(1.5) 2 = ceil(1.7) for the case 2, round to the next small integer, we could use floor() Example: $rounded_value = floor($floor_value); if rounded the following values, the results are like shown 1 = floor(1.3) 1 = floor(1.5) 1 = floor(1.7) for the case 3, round as