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.

<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.

<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

Pages

Monday, 2 December 2013

jQuery Background Change

HTML

CSS

JAVASCRIPT

17 comments :

Get my Latest Lessons