Images list thumbnails pagination

alidj24

2013-03-11 22:28

Hello,

For all of you who needs to paginate the imagelist thumbs.
Example: Using 30 thumbs/pag 5rows/5columns using 50px images size.
Click this link (http://s4.postimage.org/wj5yktzz1/pagination.jpg) to see the picture example from my site.

You need 3 files uploaded to your server: jpages.js, jquery-1.8.2.min.js and jpages.css
The files can be downloaded from here: https://github.com/luis-almeida/jPages/tree/master/js (you need only this files: jpages.js, jpages.css and jquery-1.8.2.min.js)
Import those in your root folder of your server or separate folder.

In header.php (/templates/(your theme)/_header.php add the lines between <head> ...here... </head> section:



  <script type="text/javascript" src="/(your folder)/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/(your folder)/jPages.js"></script>
<script type="text/javascript">
/* when document is ready */
  $(function(){
    /* initiate the plugin */
    $("div.holder").jPages({
        containerID  : "imagesListPreview",
        perPage      : 30,
        startPage    : 1,
        startRange   : 1,
        midRange     : 5,
        endRange     : 1
    });
});
</script>
<link rel="stylesheet" type="text/css" href="http://www.classics-romania.ro/jPages.css" />

In file /core/files.php find this line of code


$content .= '<ul class="imagesList" id="imagesListPreview">';

and replace with:


$content .= '<div class="holder"></div><ul class="imagesList" id="imagesListPreview">';

Also in /core/files.php make sure that this line


$content .=<a href="'.DIR_FILES.$aData['sFileName'].'" onmouseover="previewImage( this, \''.$aData['sFileName'].'\' )" class="mlbox[preview]" title="'.$aData['sAlt'].'"><img src="'.DIR_FILES.$aData['iSizeValue2'].'/'.$aData['sFileName'].'" alt="'.$aData['sAlt'].'" /></a>

had <li> at the begining of <a href...> and </li> after </a> as you can see bellow:


 $content .= '<li><a href="'.DIR_FILES.$aData['sFileName'].'" onmouseover="previewImage( this, \''.$aData['sFileName'].'\' )" class="mlbox[preview]" title="'.$aData['sAlt'].'"><img src="'.DIR_FILES.$aData['iSizeValue2'].'/'.$aData['sFileName'].'" alt="'.$aData['sAlt'].'" /></a></li>';

Save all the data on you server and thats it.

» Quick.Cart v6.x

alidj24

2013-03-11 22:32

one small add, for those who want not to open an popup with picture after clicking an thumb just replace


 $content .= '<li><a href="'.DIR_FILES.$aData['sFileName'].'" onmouseover="previewImage( this, \''.$aData['sFileName'].'\' )" class="mlbox[preview]" title="'.$aData['sAlt'].'"><img src="'.DIR_FILES.$aData['iSizeValue2'].'/'.$aData['sFileName'].'" alt="'.$aData['sAlt'].'" /></a></li>';

with


$content .= '<LI><img onclick="previewImage( this, \''.$aData['sFileName'].'\' )" class="mlbox[preview]" title="'.$aData['sAlt'].'" src="'.DIR_FILES.$aData['iSizeValue2'].'/'.$aData['sFileName'].'" alt="'.DIR_FILES.$aData['sFileName'].'" /></LI>';

and on click the image will change only in the big preview <div>

kasev3v

2013-04-22 09:36

Hi, I am finding this way of image preview.
Thanks for your idea first!
However, this doesn't work on my site after adding these datas.
Can you provide some helps or more details?
Thank you!

Back to top

Images list thumbnails pagination

alidj24

» Quick.Cart v6.x

alidj24

kasev3v

Over 32 thousand websites based on Quick.Cart and Quick.Cms. See the most interesting ones...