jQuery Plugin - Dynamic Sorting, Paging and Filtering Product list / Portfolio., ID Attribute Options

[lacat1]

To Whom It May Concern,

I am trying to use the jQuery Plugin - Dynamic Sorting, Paging and Filtering Product list / Portfolio. I am fairly new to the plugings and I am trying very hard to learn. I am having trouble setting the id tag to a new page link. I am sure it is a simple problem for someone more experianced. So sorry to ask.

I would like the customer to be able to click on the image and the image open up in a new webpage. So far when the image is click on a pop up that says product id=1 or any of the product id numbers.


I tried to put a link on the image but it made the sort stop working.

Can someone please give me instruction. I would deeply appreciate it.


1.This is the address for the plug in http://jquerydynamiclist.webscyber.com/

2. Here is my website address. If you click on the product in the list it will go to a pop up that says product id=1.

http://www.rareimpressions.com/Accessories.html






here is the code:


/*################### start user setings ######################################################*/

// start user setings
var maxColumn = 4; // max cells in a row
var range = 3; // range of num links to show
// end user setings
/*################### end user setings ######################################################*/
var rowsPerPage = 0;
var currentpage = 0;
var maxPrice = 0;
var minPrice = 0;
var sortBy = '';
var sortOrder = 0;

// the products information array
var products = [
{"id":"1","category":"Necklace Sets","price":19.99,"image":"/images/Jewerly Under Construction small.jpg","title":"Brown and Gold Necklace Set"}
,{"id":"2","category":"BlackBerry","price":450,"image":"images/BlackBerry-9780-Bold.gif","title":"BlackBerry 9780 Bold"}
,{"id":"12","category":"BlackBerry","price":520,"image":"images/BlackBerry-Torch-9800.gif","title":"BlackBerry Torch 9800"}
,{"id":"26","category":"HTC","price":1850,"image":"images/HTC-Desire-S.gif","title":"HTC Desire S"}
,{"id":"50","category":"HTC","price":600,"image":"images/HTC-HD7.gif","title":"HTC HD7"}
,{"id":"21","category":"HTC","price":2400,"image":"images/HTC-Incredible-S.gif","title":"HTC Incredible S"}
,{"id":"11","category":"HTC","price":2500,"image":"images/HTC-Sensation.gif","title":"HTC Sensation"}
,{"id":"3","category":"HTC","price":100,"image":"images/HTC-Wildfire.gif","title":"HTC Wildfire"}
,{"id":"6","category":"Motorola","price":2460,"image":"images/Motorola-Atrix-4G.gif","title":"Motorola Atrix 4G"}
,{"id":"14","category":"Motorola","price":100,"image":"images/Motorola-DEFY.gif","title":"Motorola DEFY"}
,{"id":"15","category":"Nokia","price":1200,"image":"images/Nokia-C7.gif","title":"Nokia C7"}
,{"id":"60","category":"Nokia","price":1700,"image":"images/Nokia-N8.gif","title":"Nokia N8"}
,{"id":"70","category":"Nokia","price":2000,"image":"images/Nokia-X6.gif","title":"Nokia X6"}
,{"id":"45","category":"Samsung","price":1800,"image":"images/Samsung-I9000-Galaxy-S.gif","title":"Samsung I9000 Galaxy S"}
,{"id":"23","category":"Samsung","price":2900,"image":"images/samsung-I9100-galaxy-S2.gif","title":"samsung I9100 galaxy S2"}
,{"id":"17","category":"Samsung","price":1300,"image":"images/Samsung-S5830-Galaxy-Ace.gif","title":"Samsung S5830 Galaxy Ace"}
,{"id":"99","category":"Sony-Ericsson","price":1400,"image":"images/Sony-Ericsson-XPERIA-X10.gif","title":"Sony Ericsson XPERIA X10"}
];


function setProducts(){
sortBy = sortBy?sortBy:$('#product_sort').val() ;
rowsPerPage = rowsPerPage?rowsPerPage:$('.product_pages button:first').html() ;
desc = sortOrder>0?true:false;
currentpage = currentpage>0?currentpage:1; // if current page is less than first page...
var totalLoop = rowsPerPage;
var loop = 0;
var countCellData = 0;
var offset = 0;
// empty content
$('#product_show').html(' ');
// set select boxes to there selected as the var value
$('#product_order').val(sortOrder);
$('#product_sort').val(sortBy);

var filterdProducts = []; // displayed products array
var key = 0;
// if needed price range filter
if(!minPrice && !maxPrice){
filterdProducts = products;
} else{
$.each(products, function(i, object) {
var curentPrice = parseFloat(object.price);
var priceMinOk = true;
var priceMaxOk = true;
// filter results match the price range
if(maxPrice || minPrice){
if(maxPrice && maxPrice<curentPrice){
priceMaxOk = false;
}
if(minPrice && minPrice>curentPrice){
priceMinOk = false;
}
}
// loop over list and get only related to new array
if( priceMinOk && priceMaxOk ){
filterdProducts[key] = object;
key++;

}

});
}

// get the amount of results
var totalResults = filterdProducts.length;
if(totalResults>0){
// if there are results - set selected order
filterdProducts.sort(function(a, b){
var a1= a[sortBy], b1= b[sortBy];
if(a1== b1){ return 0;}
if(desc){
return (a1 > b1) ? -1 : (a1 < b1) ? 1 : 0;
}else{
return a1> b1? 1: -1;
}
});
}
// show the amount of results
$('.product_results').html(totalResults);
/****** start build pagination links ******/
var totalpages = Math.ceil(totalResults/ rowsPerPage) ; // calculate the total pages

if(totalpages>1){
// fix displayed page number if its biger then exist
if (currentpage > totalpages) {
// set current page to last page
currentpage = totalpages;
}
// set the offset of the list, based on current page
offset = (currentpage - 1) * rowsPerPage;

var pagination = '';
var lastPage = 0;
// set the min page of the list, based on the range
var minPage = parseFloat(currentpage) - parseFloat(range);
minPage = minPage>0?minPage:1;
// if not page 1, don't show back links
if (currentpage > 1) {
// get previous page num
pagination += '<button type="button" name="'+(currentpage - 1)+'" class="product_button" title="◄Previous" >◄Previous<\/button>';
// show page 1 only if the min page isn`t page 1 (prevent page 1 to show twice)
if(minPage>1){
pagination += '<button type="button" name="1" class="product_button" title="1" >1<\/button>';
}
}

// loop to show links to range of pages around current page
for (var x = minPage; x <= (currentpage + range) ; x++) {
// validate page number
if (x <= totalpages) {
lastPage = x;
// if this is current page set its value to 0 (prevent click) and set class as selected
if (x == currentpage) {
pagination += '<button type="button" name="0" class="product_button_selected" title="'+x+'" >'+x+'<\/button>';
} else {
pagination += '<button type="button" name="'+x+'" class="product_button" title="'+x+'" >'+x+'<\/button>';
}
}
}

// if not on last page, show forward and last page links
if (currentpage != totalpages) {
// get next page
var nextPage = parseFloat(currentpage) + 1;
if(lastPage<totalpages){
// show page last page only if the min page isn`t last page (prevent page 1 to show twice)
pagination += '<button type="button" name="'+totalpages+'" class="product_button" title="'+totalpages+'" >'+totalpages+'<\/button>';
}
pagination += '<button type="button" name="'+nextPage+'" class="product_button" title="Next►" >Next►<\/button>';
}
// update the html
$('.product_pagination').html(pagination);
}else{
// if no pages or just one page dont show pagination
$('.product_pagination').html('<button type="button" name="0" class="product_button_selected" title="1" >1<\/button>');
}
var offsetEnd = parseFloat(rowsPerPage) + parseFloat(offset);
/****** end build pagination links ******/

// build cells content
var cell = '<table border="0" cellpadding="2" cellspacing="0" width="100%" id="product_table">';
cell += '<tr>';

// get the keys is in the display pagination range
var pageProducts = filterdProducts.slice(offset,offsetEnd);
// loop over the query list
$.each(pageProducts, function(i, object) {
// get min and max price range for price range filter slider
setPriceRange(parseFloat(object.price));
countCellData++; // flug to know if there is content
cell += '<td align="center" >';
cell += '<div><img src="'+object.image+'" alt="'+object.title+'" title="'+object.title+'" longdesc="'+object.id+'" border="0" ><\/div>';
cell += '<div>'+object.title+'<\/div>';
cell += '<div>'+object.price+'<\/div>';
cell += '<div>'+object.category+'<\/div>';
cell += '<\/td>';

totalLoop--;
loop++;
// if the row ended but the table as unmach cells number

if(!totalLoop && loop){
for(var i=0;i<(maxColumn-loop);i++){
// add empty cell
cell += '<td> <\/td>';
}
}
// determine if the row ended

if(loop==maxColumn ){
cell += '<\/tr>';
loop = 0;
if(totalLoop){
cell += '<tr>';
}
}
});
cell += '<\/tr>';
cell += '<\/table>';
if(countCellData>0){
// if exist content
$('#product_show').html(cell);
// set image onclick event
$('#product_show img').click(function(){
alert('Product ID = '+$(this).attr('longdesc'));
});

}
setPagination();
}

// compare prices to set price range
function setPriceRange(price){
// find min and max price range
if(maxPrice<price){
maxPrice = price;
}
if(minPrice>price){
minPrice = price;
}
}


// price range animation slider
function PriceRangeSlider(){
$( "#product_price_slider" ).slider({
range: true,
min: 0,
max: maxPrice,
values: [ minPrice, maxPrice ],
slide: function( event, ui ) {
// update the html for the slider value
$( "#product_price_range" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
,stop: function(event, ui) {
// update query on price range
currentpage = 0;
minPrice = ui.values[0];
maxPrice = ui.values[1];
displayProducts();
}
});
// update the html for the slider value before its changes
$( "#product_price_range" ).html( $( "#product_price_slider" ).slider( "values", 0 ) + " - " + $( "#product_price_slider" ).slider( "values", 1 ) );

}

// page button click
function setPagination(){
$('.product_pagination button[name!=0]').click(function(){
currentpage = $(this).attr('name');
displayProducts();
}) ;

}

// animante list display
function displayProducts(){

$('#product_show').fadeOut('slow', function() {
// Animation complete
setProducts();
$('#product_show').fadeIn('slow');
});
}

$(document).ready(function() {

setProducts();
PriceRangeSlider();

$('#product_sort').change(function(){
sortBy = $(this).val();
currentpage = 0;
sortOrder = 0;
displayProducts();
})

$('#product_order').change(function(){
sortOrder = $(this).val();
currentpage = 0;
displayProducts();
})

$('.product_pages button[value!=0]').click(function(){
$('.product_pages button').removeClass('product_button_selected').addClass('product_button');
$(this).addClass('product_button_selected');
currentpage = 0;
rowsPerPage = $(this).val();
displayProducts();
}) ;

$(".product_pages button[value="+rowsPerPage+"]").addClass('product_button_selected');
});

$(window).load(function(){
$('html, body').animate({scrollTop: '0px'}, 0);
})

</script>

<style type="text/css">
body{
background-color: none;
font-family:Fleix Tilt, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin: 0;
}


.description{
width: 700px;
border: 1px solid #000000;
padding: 3px;
}
h3{
color:#000000;
font-weight: bold;
font-size: 16px;
word-spacing: 5px;
font-style: italic;
}

h4 ,ul, li{
text-align: left;
color:#000000;
font-size: 12px;
}
li{
padding-left: 2px;
}

select{
color:#000000;
font-weight: bold;
background-color: #FAFAD2;
cursor: n-resize;
}

.credits{
color:#000000;
font-size: 12px;
padding: 10px;

}
#product_filters > #product_price_slider { padding: 10px !important; }

.product_page {
background-color: #8B7355;
width: 92%;
}

#product_table td{
background-color: #FFF;
border: 1px solid #000000;
}
.product_page td{
white-space: nowrap;
border: 1px solid #F0F0F0;
padding-left: 5px;
}

.product_button{
color:#000000;
border: 1px solid #F0F0F0;
background-color: #8B7355;
cursor: pointer;
}
.product_button_selected{
font-weight: bold;
border: 1px solid #9C9C9C;
background-color: #FAFAD2;
}




#product_show img{
cursor: pointer;
}

.product_results{
font-weight: bold;
}

/**
* change the price range style
*/
#product_price_slider{
width: 320px;
}
#product_price_slider .ui-slider-range {
background: #FAFAD2;
}
#product_price_slider .ui-slider-handle {
border-color: #818196;
cursor: e-resize;
}

.plugin{
padding: 50px;
}


.download a{
color:#FFF;
font-size:14px;
cursor: pointer;
padding: 3px;
}
</style>

<!--start menuend-->
</head>
<br>
<center><font size="14" face="Garmond" color="#8B4513">
Accessories Page is currently being populated. Thank you.
</font></center>
<center>
<br>
<br>
<br>

<a href="http://www.rareimpressions.com/"><img src="images/Jewerly Under Construction.jpg" width="379" height="379" border="0"/></a><!--logo-->

<!--start menu-->

<body>



<div class="plugin">
<table border="0" cellpadding="2" cellspacing="0" class="product_page">
<tr >
<td>
Sort By:
</td>
<td>
<select id="product_sort">
<option value="title">Title</option>
<option value="category">Category</option>
<option value="price">Price</option>
</select>
</td>
<td>
<select id="product_order">
<option value="0">A-Z</option>
<option value="1">Z-A</option>
</select>
</td>
<td>
Price Range:
</td>
<td align="center">
<div id="product_price_range"></div>
<div id="product_price_slider"></div>
</td>
</tr>
</table>
<table border="0" cellpadding="2" cellspacing="0" class="product_page">
<tr>
<td nowrap="nowrap">
<span class="product_results">0</span> Results found
</td>
<td align="center" width="90%" class="product_pagination">
 
</td>
<td nowrap="nowrap">#Rows</td>
<td nowrap="nowrap" class="product_pages" >
<button type="button" value="5" class="product_button" title="5" >5</button>
<button type="button" value="10" class="product_button" title="10">10</button>
<button type="button" value="25" class="product_button" title="25">25</button>
</td>

</tr>
<tr>
<td colspan="7">
<div id="product_show"> </div>

</td>
</tr>



</table>