Hi, today i am going to show you a awesome Background changing setup using jQuery, we have seen this kind of feature in few social network websites like Twitter and Yahoo. hope you guys will enjoy to see this demo. lets start how we do this.

HTML
here the logic is quite simple first we need to take a background png image and fix to a layer div, the background image is meshed image and it gives a wrapper look on background image , and in next step take the list of images and put it in titles div, store the background image names in img tag in dir attribute,
you can see how to make the drop down menu in my previous post easy drop down menu , take two more div's to mange the images can scroll top to bottom. and here apply the default background image to body tag and we will change this later using jquery by clicking on image thumbs.
you can see how to make the drop down menu in my previous post easy drop down menu , take two more div's to mange the images can scroll top to bottom. and here apply the default background image to body tag and we will change this later using jquery by clicking on image thumbs.
<body id="bg"> <div id="layer"></div> <div id="lessoncup"> <div id="icon"><img src="icons/bgclick.png" width="24" height="26"></div> <div id="titlebox"> <div id="titles"> <ul> <li><img src="icons/g+.jpg" width="85" height="82" dir="2.jpg"></li> <li><img src="icons/g.jpg" width="85" height="82" dir="1.jpg"></li> <li><img src="icons/you.jpg" width="85" height="82" dir="3.jpg"></li> <li><img src="icons/mp.jpg" width="85" height="82" dir="4.jpg"></li> <li><img src="icons/pl.jpg" width="85" height="82" dir="5.jpg"></li> <li><img src="icons/n.jpg" width="85" height="82" dir="6.jpg"></li> <li><img src="icons/gm.jpg" width="85" height="82" dir="7.jpg"></li> <li><img src="icons/gd.jpg" width="85" height="82" dir="8.jpg"></li> <li><img src="icons/gc.jpg" width="85" height="82" dir="9.jpg"></li> <li><img src="icons/gt.jpg" width="85" height="82" dir="10.jpg"></li> <li><img src="icons/gbb.jpg" width="85" height="82" dir="11.jpg"></li> <li><img src="icons/gb.jpg" width="85" height="82" dir="12.jpg"></li> <li><img src="icons/gp.jpg" width="85" height="82" dir="13.jpg"></li> </ul> </div> <div id="more">More</div> <div id="less">Less</div> </div> </div> </body>
CSS
here i am not giving any info about to making drop down menu you just check it my previous lesson. here i just styled the layer div with position : fixed; and z-index:1; the reason is giving z-index to layer div it should be on top of the background image, and i applied the default background image to body tag to display the image while loading the webpage first and fix the background image size to 100% auto.
<style> #lessoncup{width:30px; height:20px;position:absolute;right:0; top:50px; z-index:3;} ul{list-style:none; margin:0; padding:0;} li{ float:left;padding:5px; cursor:pointer;} #titlebox{ width:320px; height:380px; color:#000; box-shadow:0 0 10px #CCC; border:solid #CCC 1px;font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#666;overflow:hidden; display:none; position:absolute; right:10px;} #titles{ width:300px; height:290px; overflow:hidden; margin:20px;} #more{ width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;} #less{width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;} #icon{ cursor:pointer;} #layer{background-image:url(light.png);position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;} #bg{background-image:url(1.jpg);background-size:100% auto;} </style>
JAVASCRIPT
here i have written four click functions one is #more click event to display the hidden bottom images to display it by animating the DIV section, and second is #less click event to display the hidden top images to display. the third function is to display the drop down box, and the last function is to hide the drop down box and all the animated div positions is set it in default positions.
now write the click function to li img tag and get the background image name from dir attribute from IMG tag and apply to #bg selector which the ID is assign to BODY tag. it will change the background image with the taken image.
now write the click function to li img tag and get the background image name from dir attribute from IMG tag and apply to #bg selector which the ID is assign to BODY tag. it will change the background image with the taken image.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $('#more').click(function(event){ $('ul').animate({marginTop:'-290px'},200); $('#titlebox').animate({height:'280px'},200); $('#more').animate({marginTop:'-100px'},200).hide(); $('#less').show().animate({marginTop:'-100px'},200); event.stopPropagation(); }); $('#less').click(function(event){ $('ul').animate({marginTop:'0'}); $('#titlebox').animate({height:'380px'}); $('#less').animate({marginTop:'0'}).hide(); $('#more').show().animate({marginTop:'0'}); event.stopPropagation(); }); $('#icon').click(function(event){ $('#titlebox').fadeIn('slow'); event.stopPropagation(); }); $('li img').click(function(){ var imgbg = $(this).attr('dir'); $('#bg').css({backgroundImage: "url("+imgbg+")"}); }); $('#layer').click(function() { $('#titlebox').hide(); $('ul').animate({marginTop:'0'}); $('#titlebox').animate({height:'380px'}); $('#more').animate({marginTop:'0'}).show(); $('#less').animate({marginTop:'0'}).hide(); }); }); </script>
Live Demo Download Script
if you like this App give your feedback Thank you
ReplyDeleteHi kashim... Pls help me to create a model window with textbox and labels
ReplyDeleteNice.. usefull. Thanks!
ReplyDeletegood work .. i like this
ReplyDeleteWas it necessary to be pictures of you?
ReplyDeletehmmm... if you not like it you can remove keep yours or any other i just keep realistic picture ..
DeleteC'est super, bravo et merci.
ReplyDeletethank gan... good job
ReplyDeleteThank you.. @lessoncup
Deletenice useful....... thnx
ReplyDeleteThanks Khasim.... all ur posts are great and easy to use...
ReplyDeleteAwesome images and photos
ReplyDeleteBackground Pictures
thank you john @lessoncup
DeleteNice...:)
ReplyDeleteWhat is the purpose of event.stopPropagation()?
Thanks
awesome Apps Bro with good background color.
ReplyDeletegood
ReplyDeleteThis post is really valuable that designed for the new visitors. Pleasing work, keep on writing.
ReplyDeleteinteraction design firm