While i was finding new video sites for uploading my programming video. I found a intersting feature in vimeo.com i called it multiple ProfilePic toggling system its awsm it allow the user to upload multiple profilepic and the viewer can toggle between them and can see the pics.
html
Your markup has a div with id #container and inside that had another div with id of #Profile-container and inside it we have all our images<div id="container">
<center>
<h1>Vimeo like Multiple ProfilePic</h1>
<div class="Profile-container">
<img class="large-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/>
<ul>
<li><img class="small-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg" data-large-img="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg"/></li>
<li><img class="small-img" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg" data-large-img="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg"/></li>
<li><img class="small-img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg" data-large-img="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg"/></li>
<li><img class="small-img" src="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg" data-large-img="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg"/></li>
<li><img class="small-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg" data-large-img="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/></li>
</ul>
</div>
</center>
</div>
css
body{
margin: 0px;
background: #555;
}
#container{
height: 800px;
width: 700px;
border: 1px solid #ccc;
margin: 0 auto;
background: #fafbfb;
}
.Profile-container{
height: 300px;
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.large-img{
width: 250px;
height: 250px;
}
.small-img{
height: 40px;
width: 37px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
.small-img:hover{
border: 2px solid cornflowerblue;
}
.Profile-container ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.Profile-container ul li{
float: left;
}
jQuery
when ever the small image is clicked we are getting the data-large-img attribute from the image and setting the data of that attribute as the src of large image<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get he large image and small image
var largeImage = $('.large-img');
var smallImage = $('.small-img');
smallImage.click(function(){
var largeImageData = $(this).attr('data-large-img');
largeImage.attr('src', largeImageData);
});
});
</script>
Putting it all together
<!DOCTYPE html>
<html>
<head>
<title>Vimeo like multiple profilepic display - hunklessons.blogspot.com</title>
<style type="text/css">
body{
margin: 0px;
background: #555;
}
#container{
height: 800px;
width: 700px;
border: 1px solid #ccc;
margin: 0 auto;
background: #fafbfb;
}
.Profile-container{
height: 300px;
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.large-img{
width: 250px;
height: 250px;
}
.small-img{
height: 40px;
width: 37px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
.small-img:hover{
border: 2px solid cornflowerblue;
}
.Profile-container ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.Profile-container ul li{
float: left;
}
</style>
</head>
<body>
<div id="container">
<center>
<h1>Vimeo like Multiple ProfilePic</h1>
<div class="Profile-container">
<img class="large-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/>
<ul>
<li><img class="small-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg" data-large-img="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg"/></li>
<li><img class="small-img" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg" data-large-img="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg"/></li>
<li><img class="small-img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg" data-large-img="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg"/></li>
<li><img class="small-img" src="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg" data-large-img="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg"/></li>
<li><img class="small-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg" data-large-img="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/></li>
</ul>
</div>
</center>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get he large image and small image
var largeImage = $('.large-img');
var smallImage = $('.small-img');
smallImage.click(function(){
var largeImageData = $(this).attr('data-large-img');
largeImage.attr('src', largeImageData);
});
});
</script>
</body>
</html>
No comments:
Post a Comment