jQuery Plugin - Dynamic Sorting, Paging and Filtering Product list / Portfolio., ID Attribute |
jQuery Plugin - Dynamic Sorting, Paging and Filtering Product list / Portfolio., ID Attribute |
lacat1 |
Sep 25 2011, 10:24 PM
Post
#1
|
Group: Members Posts: 1 Joined: 25-September 11 Member No.: 15,483 |
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> |
Lo-Fi Version | Time is now: 18th April 2024 - 02:35 AM |