Javascript Image Flow gallery for blogger
Follow simple and easy step to adding this image gallery to your blog --->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code <head> by CTRL+F key.
* Copy below code and paste after <head>
Follow simple and easy step to adding this image gallery to your blog --->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code <head> by CTRL+F key.
* Copy below code and paste after <head>
<link rel="stylesheet" href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/imageflow.packed.css" type="text/css" /> <script type="text/javascript" src="http://blogger9.googlecode.com/files/imageflow.packed.js"></script>
* Now click to save your blogger Template.
* Again go to your blogger Dashboard and click in design tab.
* Now you are here --->>> Page Element.
* Click in add Gadget which is in your blog sidebar.
* When open new window choose HTML/javascript code from list.
* And when open new blank box copy below code and paste in blank box.
<div class="colmask leftmenu">
<div class="colright">
<div class="col1wrap">
<div class="col1">
<div id="instanz_1" class="imageflow">
<img src="http://imageflow.finnrudolph.de/img/top_01.jpg" longdesc="http://imageflow.finnrudolph.de/img/01.jpg" width="383" height="255" alt="Image 1" />
<img src="http://imageflow.finnrudolph.de/img/top_02.jpg" longdesc="http://imageflow.finnrudolph.de/img/02.jpg" width="324" height="432" alt="Image 2" />
<img src="http://imageflow.finnrudolph.de/img/top_03.jpg" longdesc="http://imageflow.finnrudolph.de/img/03.jpg" width="383" height="287" alt="Image 3" />
<img src="http://imageflow.finnrudolph.de/img/top_04.jpg" longdesc="http://imageflow.finnrudolph.de/img/04.jpg" width="383" height="216" alt="Image 4" />
<img src="http://imageflow.finnrudolph.de/img/top_05.jpg" longdesc="http://imageflow.finnrudolph.de/img/05.jpg" width="383" height="216" alt="Image 5" />
<img src="http://imageflow.finnrudolph.de/img/top_06.jpg" longdesc="http://imageflow.finnrudolph.de/img/06.jpg" width="383" height="216" alt="Image 6" />
<img src="http://imageflow.finnrudolph.de/img/top_02.jpg" longdesc="http://imageflow.finnrudolph.de/img/02.jpg" width="324" height="432" alt="Image 7" />
<img src="http://imageflow.finnrudolph.de/img/top_06.jpg" longdesc="http://imageflow.finnrudolph.de/img/06.jpg" width="383" height="216" alt="Image 8" />
<img src="http://imageflow.finnrudolph.de/img/top_03.jpg" longdesc="http://imageflow.finnrudolph.de/img/03.jpg" width="383" height="287" alt="Image 9" />
<img src="http://imageflow.finnrudolph.de/img/top_04.jpg" longdesc="http://imageflow.finnrudolph.de/img/04.jpg" width="383" height="216" alt="Image 10" />
<img src="http://imageflow.finnrudolph.de/img/top_01.jpg" longdesc="http://imageflow.finnrudolph.de/img/01.jpg" width="383" height="255" alt="Image 11" />
<img src="http://imageflow.finnrudolph.de/img/top_05.jpg" longdesc="http://imageflow.finnrudolph.de/img/05.jpg" width="383" height="216" alt="Image 12" />
<img src="http://imageflow.finnrudolph.de/img/top_06.jpg" longdesc="http://imageflow.finnrudolph.de/img/06.jpg" width="383" height="216" alt="Image 13" />
<img src="http://imageflow.finnrudolph.de/img/top_03.jpg" longdesc="http://imageflow.finnrudolph.de/img/03.jpg" width="383" height="287" alt="Image 14" />
<img src="http://imageflow.finnrudolph.de/img/top_04.jpg" longdesc="http://imageflow.finnrudolph.de/img/04.jpg" width="383" height="216" alt="Image 15" />
<img src="http://imageflow.finnrudolph.de/img/top_05.jpg" longdesc="http://imageflow.finnrudolph.de/img/05.jpg" width="383" height="216" alt="Image 16" />
<img src="http://imageflow.finnrudolph.de/img/top_02.jpg" longdesc="http://imageflow.finnrudolph.de/img/02.jpg" width="324" height="432" alt="Image 17" />
<img src="http://imageflow.finnrudolph.de/img/top_03.jpg" longdesc="http://imageflow.finnrudolph.de/img/03.jpg" width="383" height="287" alt="Image 18" />
<img src="http://imageflow.finnrudolph.de/img/top_04.jpg" longdesc="http://imageflow.finnrudolph.de/img/04.jpg" width="383" height="216" alt="Image 19" />
<img src="http://imageflow.finnrudolph.de/img/top_01.jpg" longdesc="http://imageflow.finnrudolph.de/img/01.jpg" width="383" height="255" alt="Image 20" />
</div>
NOTE:- You can change image with your own image url ok.
* Now click to save your HTML/javascript and after saving this element drag and drop this element below header and again click to save button now you are done.
|
2 Responses So Far:
I dont know about java script but this tutorial really helps a lot. Thanks for showing how to use those codes.
tinnitus miracle ebook
Hi, I tried the above method. Please take a look at
http://vamshi-test.blogspot.com/2012/01/test1.html
It is giving the circular effect, but is displaying the images as broken links. Image is being displayed only if I click on the link