Simple pagination for image gallery
Question
i want to do pagination for image gallery like their should be a drop down containing 2-8 if i click on 2 it should display only two images in first row and rest of the images should fallow first row and no need to hide
example: if i click on 2 (consider their will be 9 images in gallery)
[1,2]
[3,4]
[5,6]
[7,8]
[9,0]
if i click on 3
[1,2,3]
[4,5,6]
[7,8,9]
like wise
this is my code
http://jsfiddle.net/rajaeerasd/GbA2C/
<!DOCTYPE html>
<html>
<head>
<title>Easylib Soft</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/alauddinansari7/jColorPicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#colorPicker").ColorPicker({selectedColor:'#fff', onSelect:
function(color){
document.body.bgColor=color;
}
});
});
</script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<![endif]-->
<style>
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<div id="colorPicker">colorPicker</div>
<ul class="menu">
<li tabindex="1">
<a href="http://www.google.co.in/"><span class="title">One</span></a>
</li>
<li tabindex="1">
<span class="title">Two</span>
</li>
<li tabindex="1">
<span class="title">Three</span>
</li>
<li tabindex="1">
<span class="title">Four</span>
</li>
<li tabindex="1">
<span class="title">Five</span>
</li>
<li tabindex="1">
<span class="title">Six</span>
</li>
<li tabindex="1">
<span class="title">Seven</span>
</li>
<li tabindex="1">
<span class="title">Eight</span>
</li>
<li>
<span class="title">Nine</span>
</li>
</ul>
<!-- BSA AdPacks code -->
<script>
(function(){
var bsa = document.createElement('script');
bsa.async = true;
bsa.src = 'www.google.com';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
</body>
</html>
1 answers
solution1
0 2013-08-15 13:47:49
Im a little unclear on what you mean by 'drop down' (a new, separate div?) but regardless of that, one approach I would try out if I were you is to
1.) assign a uniuque id to each of the clickable divs 2.) add a class definition to all the clickable divs (same class id) 3.) add jquery to detect a click on any of item with the new class id 4.) when clicked get the id of the clicked div 5.) based on that 'id' (assuming you use the number of the div to correspond to the id -- so div #2 would hav id=2, etc.) you could then use that and in a NEW div
a.) show the div of results, (clear out or erase any old results from it I guess)
b.) append HTML that is built based on getting a count from the cliked div id through 9... so if the user clicked #4, it would result in your new div showing 6 'results'... then its just a matter of doing a loop to build the desired HTML to show the results, based on the id of whick is clicked, and the total number of returned results (keeping in mind that you know theres a total of 9. I would use a simple table structure to build / write the HTML in the loop and use counter to keep track of each row of results then when the counter = 9, just finish up the table of results and the new div should contain the results.
not sure this all makes sense but it would be the initial approach I would take, theres probably much simpler ways to handle it admittedly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.