jquery image gallery expend cliking on any li -
please help. have image gallery , want expend every thumbnail show total length image , clicking goes original size. please advice of give jquery code. give thanks you.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script> $(document).ready(function(e) { $('#wrapper ul li').bind('click', function () { $(this).removeclass(); $(this).fadein(500).addclass("applyclass");}); }); </script> <style> html, body{margin:0; padding:0; width:100%; height:100%} #wrapper{background:#0cc; margin:0 auto 0 auto} #wrapper ul{list-style:none; margin:0 auto 0 auto; padding:0; width:960px;} #wrapper ul li{display:inline-block; width:227px; height:180px; background:#fc3; margin:5px;} #wrapper ul li.applyclass{display:block; width:960px; height:300px} #wrapper ul li.removeclass{display:inline-block; width:227px; height:180px} </style> </head> <body> <div id="wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> </body> </html>
try script,
$(document).ready(function() { $('#wrapper ul li').click(function () { if($(this).hasclass("applyclass")) $(this).removeclass("applyclass"); else $(this).fadein(500).addclass("applyclass"); }); }); demo: http://jsfiddle.net/8tcht/1/
update code cut down size of li clickin on other li's
$(document).ready(function() { $('#wrapper ul li').click(function () { $('#wrapper ul li').removeclass("applyclass"); $(this).fadein(500).addclass("applyclass"); }); }); demo: http://jsfiddle.net/8tcht/3/
jquery gallery bind
No comments:
Post a Comment