Ajax photo gallery for Blogger Blog

Today we discuss about how to use Ajax photo gallery for your blogger blog to create professional blog .I seen so many wordpress theme which are using featured content gallery plug-in for create professional photo content gallery . It look very professional blog when you add featured content gallery plug-in in your wordpress blog . unfortunately blogger who use blogger blog or other blogging platforms for blogging they don’t have such plug-in or any other widget for use this photo content gallery . that the main reason for me to develop the idea to use this featured content gallery for blogger blog.
This can be done by following the three below steps.
1. login to your blogger blog account and open the blog layout section and click the “EDIT HTML” when you click the edit html page is coming like this ;
edithtmlpage
Search the </head> tag on your template and paste the CSS for your features content gallery before the </head> tag.
script
#myGallery, #myGallerySet, #flickrGallery
{width:590px; height:400px; z-index:5}
#flickrGallery
{width:500px; height:334px}

#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display:none}
.jdGallery
{overflow:hidden; position:relative}

.jdGallery img
{border:0; margin:0}

.jdGallery .slideElement
{width:100%;
height:100%;
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
background-image:url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/
AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800')}

.jdGallery .loadingElement
{width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
background-image:url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/
AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800')}

.jdGallery .slideInfoZone
{position:absolute;
z-index:10;
width:100%;
margin:0px;
left:0;
bottom:0;
height:50px;
background:#000;
color:#fff;
text-indent:0;
overflow:hidden}

* html .jdGallery .slideInfoZone
{bottom:-1px}

.jdGallery .slideInfoZone h2
{padding:7px 10px 2px 10px;
font-size:12px;
margin:0;
font-weight:bold;
color:#ffffff;
text-transform:uppercase;
background:#111111;
letter-spacing:0em}

.jdGallery .slideInfoZone p
{font-size:12px;
margin:2px 5px;
color:#fff;
padding:0px 0px 0px 5px;
font-family:arial}

.jdGallery div.carouselContainer
{position:absolute;
height:135px;
width:100%;
z-index:10;
margin:0px;
left:0;
top:0}

.jdGallery a.carouselBtn
{position:absolute;
bottom:0;
right:30px;
height:20px;
text-align:center;
padding:0 10px;
font-size:13px;
background:#000;
color:#fff;
cursor:pointer}

.jdGallery .carousel
{position:absolute;
width:100%;
margin:0px;
left:0;
top:0;
height:115px;
background:#000;
color:#fff;
text-indent:0;
overflow:hidden}

.jdExtCarousel
{overflow:hidden;
position:relative}

.jdGallery .carousel .carouselWrapper,
.jdExtCarousel
.carouselWrapper{
position:absolute;
width:100%;
height:78px;
top:10px;
left:0;
overflow:hidden}

.jdGallery .carousel
.carouselInner, .jdExtCarousel
.carouselInner{
position:relative}

.jdGallery .carousel .carouselInner
.thumbnail, .jdExtCarousel
.carouselInner .thumbnail
{cursor:pointer;
background:#000;
background-position:center center;
float:left;
border:solid 1px #fff}

.jdGallery .wall .thumbnail,
.jdExtCarousel .wall .thumbnail
{margin-bottom:10px}

.jdGallery .carousel
.label, .jdExtCarousel .label
{font-size:13px;
position:absolute;
bottom:5px;
left:10px;
padding:0;
margin:0}

.jdGallery .carousel
.wallButton, .jdExtCarousel
.wallButton{
font-size:10px;
position:absolute;
bottom:5px;
right:10px;
padding:1px 2px;
margin:0;
background:#222;
border:1px solid #888;
cursor:pointer}

.jdGallery .carousel
.label .number, .jdExtCarousel
.label .number
{color:#b5b5b5}

.jdGallery a
{font-size:100%;
text-decoration:none;
color:inherit}

.jdGallery a.right, .jdGallery a.left
{position:absolute;
height:99%;
width:25%;
cursor:pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity:0.2;
opacity:0.2}

* html .jdGallery a.right,
* html .jdGallery a.left
{filter:alpha(opacity=50)}

.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8}

.jdGallery a.left
{left:0;
top:0; background:url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/
AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800')
no-repeat center left}

* html .jdGallery a.left{
background:url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/
AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800')
no-repeat center left}

.jdGallery a.right
{right:0;
top:0; background:url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/
AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800')
no-repeat center right}

* html .jdGallery a.right{
background:url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/
AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800')
no-repeat center right}

.jdGallery a.open
{left:0;
top:0;
width:100%;
height:100%}

.withArrows a.open
{position:absolute;
top:0;
left:25%;
height:99%;
width:50%;
cursor:pointer;
z-index:10;
background:none;
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8}

.withArrows a.open:hover{
background:url('http://lh6.ggpht.com/
_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800')
no-repeat center center}

* html .withArrows a.open:hover{
background:url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/
AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800')
no-repeat center center;
filter:alpha(opacity=80)}

/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index:15;
position:absolute;
top:0;
left:30px;
height:20px;
text-align:center;
padding:0 10px;
font-size:13px;
background:#333;
color:#fff;
cursor:pointer;
opacity:.4;
-moz-opacity:.4;
-khtml-opacity:0.4;
filter:alpha(opacity=40)}

.jdGallery .gallerySelector
{z-index:20;
width:100%;
height:100%;
position:absolute;
top:0; left:0;
background:#000}

.jdGallery .gallerySelector h2
{margin:0;
padding:10px 20px 10px 20px;
font-size:20px;
line-height:30px;
color:#fff}

.jdGallery .gallerySelector
.gallerySelectorWrapper
{overflow:hidden}

.jdGallery .gallerySelector
.gallerySelectorInner div
.galleryButton
{margin-left:10px;
margin-top:10px;
border:1px solid #888;
padding:5px; height:40px;
color:#fff;
cursor:pointer;
float:left}

.jdGallery .gallerySelector
.gallerySelectorInner div.hover
{background:#333}

.jdGallery .gallerySelector
.gallerySelectorInner div
.galleryButton div.preview
{background:#000;
background-position:center center;
float:left;
border:none;
width:40px;
height:40px;
margin-right:5px}

.jdGallery
.gallerySelector
.gallerySelectorInner div
.galleryButton h3
{margin:0;
padding:0;
font-size:12px;
font-weight:normal}

.jdGallery .gallerySelector
.gallerySelectorInner div
.galleryButton p.info
{margin:0;
padding:0;
font-size:12px;
font-weight:normal;
color:#aaa}

.status-msg-wrap{
display:none}


and now copy the JavaScript file link and paste them after your CSS code and before </head> tag.


java



<script src='http://coloriteman.googlepages.com/mootoolsv111.js' type='text/javascript'/>


<script src='http://coloriteman.googlepages.com/jdgallery.js' type='text/javascript'/>



save your template and click the page element button of your dashboard and we are going to add html and JavaScript widget for add html code of content gallery . click the add a widget button and select the html /JavaScript widget.


widget


copy the html for gallery and paste them into your html/javascript widget .



<div id='myGallery'>

<div class='imageElement'>


<h3>Hollywood Actors Gallery</h3>


<p>Get Hollywood Actors photos without watermark</p>

<a class='open' href='#' title='Click here to read full story'/>


<img class='full' src='http://img392.imageshack.us/img392/1980/gallery1jf2.jpg'/>


<img class='thumbnail' src='http://img392.imageshack.us/img392/1980/gallery1jf2.jpg'/>


</div>


<div class='imageElement'>


<h3>Hollywood Actresses</h3>


<p>Get Hollywood Actress photos without watermark</p>


<a class='open' href='#' title='Click here to read full story'/>


<img class='full' src='http://img363.imageshack.us/img363/2794/gallery2fd4.jpg'/>


<img class='thumbnail' src='http://img363.imageshack.us/img363/2794/gallery2fd4.jpg'/>


</div>


<div class='imageElement'>


<h3>Bollywood Actors</h3>


<p>Get Bollywood Actors photos without watermark</p>


<a class='open' href='#' title='Click here to read full story'/>


<img class='full' src='http://img264.imageshack.us/img264/3551/gallery3gv7.jpg'/>


<img class='thumbnail' src='http://img264.imageshack.us/img264/3551/gallery3gv7.jpg'/>


</div>


<div class='imageElement'>


<h3>Bollywood Actress</h3>


<p>Get Bollywood Actress photos without watermark</p>


<a class='open' href='#' title='Click here to read full story'/>


<img class='full' src='http://img132.imageshack.us/img132/8768/gallery4ie7.jpg'/>


<img class='thumbnail' src='http://img132.imageshack.us/img132/8768/gallery4ie7.jpg'/>


</div>


<script type='text/javascript'>


function startGallery() {


var myGallery = new gallery($(&#39;myGallery&#39;), {


timed: true


});


}


window.addEvent(&#39;domready&#39;, startGallery);


</script>


</div>


just only change the images of your gallery as per your need .
save and publish your blog . you can change the width and height of gallery as per your need. just only manipulate #flickgallery class from CSS code.

0 comments :