Simple Popup Gallery without jquery plugin

CSS, Javascript 5 responses so far

Most of the jquery galleries are either only image galleries or are very less customizable .We may like to display any sort of content in our galleries like images,texts ,buttons etc. So  a fully customizable gallery is the topic of this post.The code uses simple div tags as the gallery content, so we can insert any static/dynamic content in it.Also the background will be faded to make gallery look prominent.

Please place the following html code at the end of your container div or just before closing body tag.


<style type="text/css">
#popup
{
width:600px;
border-radius:10px;
display:none;
height:600px;
z-index:1001;
position:fixed;
margin-top:-300px;
margin-left:-300px;
left:50%;
top:50%;
background:#FFFFFF;
}
.pics
{
float:left;
display:none;
position:relative;
height:600px;
width:600px;
}
#black_overlay
{
position:fixed;top:0%;left: 0%;width: 100%;height:100%; display:none;background-color: black;z-index:1000;-moz-opacity: .9;opacity:.9;filter: alpha(opacity=90);
}
.next, .prev {
position:absolute;
top:45%;
left:0%;
width:24px;
height:43px;
display:block;
z-index:1004;
}
.next {
left:96%;
}
</style>
<div id="popup">

<div id="pic1" class="pics">
<img src='<img1-source>'  height="600" width="600"/>
</div>

<div id="pic2" class="pics">
<img src='<img2-source>'  height="600" width="600"/>
</div>

<div id="pic3" class="pics">
<img src='<img3-source>'  height="600" width="600"/>
</div>

<div id="pic4" class="pics">
<img src='<img4-source>'  height="600" width="600"/>
</div>

<a href="javascript:void(null)" class="prev"><img src="images/arrow-prev.png" width="24" height="43" alt="Arrow Prev" onClick="clearTimeout(t);previous();"></a>

<a href="javascript:void(null)" class="next"><img src="images/arrow-next.png" width="24" height="43" alt="Arrow Next" onClick="clearTimeout(t);next();"></a>

</div>

<div id="black_overlay" onclick="stopgallery()"></div>

The javascript functions next() and previous() are in the following script:

<script type="text/javascript">
a=0;
function time()
{
 t=setTimeout("next()", 5000); //set time interval between gallery pics
}

function next()
 {
 if(a==4)
 a=1;
 else
 a++;
 document.getElementById('pic'+a).style.display="block";
 for(k=1;k<=4;k++)
 {
 if(k==a)
 continue;
 document.getElementById('pic'+k).style.display="none";
 }
 time();
 }
 function previous()
 {

 if(a==1)
 {
 a=4;
 document.getElementById("pic"+a).style.display="block";
 }
 else
 document.getElementById('pic' + --a).style.display="block";
 for(m=1;m<=4;m++)
 {
 if(m==a)
 continue;
 document.getElementById('pic'+m).style.display="none";
 }
 time();
 }

function showgallery()
{
document.getElementById('popup').style.display='block';
document.getElementById('black_overlay').style.display='block';
next();
}

function stopgallery()
{
document.getElementById('popup').style.display='none';
document.getElementById('black_overlay').style.display='none';</pre>
clearTimeout(t);
a=0;
}
</script>

Below lines of code will show up the popup and will start gallery at an interval of 5 secs between gallery pics.

<a href="javascript:void(null)" onclick="showgallery()">Start Gallery</a>
The following two tabs change content below.
I am a core php developer and web designer working as a freelancer in elance,odesk etc.

Latest posts by Mudit (see all)

  • http://www.deluxeblogtips.com Tran Ngoc Tuan Anh

    The idea is good, but your approach has some disadvantage:

    - No obtrusive JS: the way you use “onclick” inline is not modern JS today. You should use event listener. It works in all browser.
    - By using getElementByID() in your JS function, you make sure there’s only 1 popup gallery per page. So if users want 2 popup: 1 in the post content, 1 in the sidebar, there’s no way to achieve that.
    - All you functions are global, which is not good. You might meet the situation of name collision when your page (or users’ pages) gets complicated.

    And when you solve this problem, you might see that your code is more complicated and size is bigger. Take a look at Slimbox, it’s very small but powerful.

  • Mudit

    Thanks for reading my post
    Yes i totally agree with your comments but i have posted this as a simple and general script which can be modified and dealt in many ways but the technique used will be same in whatever method you choose.
    Thanks

  • http://www.fullpcgamez.com Waheed

    Very nice thanks alot for sharing

  • sashwat

    Thanks..Its simple one but the idea is cool indeed..Sometimes complexity doesn’t entertain but simplicity in code like this does..”:)”

  • anichandran ayyanallur

    not working pls check

x
Loading...