Numbered Thumbnails /images
Permalink Browser Info Environment
Is there a way of adding a number to thumbnails displayed in the gallery? It would help customers say which product they are interested in. I don't want to change the filenames of each image and use the caption facility. Was thinking of a number in the corner of each thumbnail added by js and css. Do you think this is achievable?
Type: | Discussion |
---|---|
Status: | Resolved |
Thanks for your reply. I have managed to achieve what I need using some changes to view.php It also puts the thumbnail number before the description on the full size image.
I had to put the thumbnail links inside inline divs to keep the numbers with the thumbnails on mobile phones. it seems to work fine on desktop, tablet and phone now.
here is the css
<?php } ?> <div class="touchgallery-thumbs" id="touchgallery-thumbs<?php echo $bID ?>"> <?php $tn = 0; foreach ($images as $img): $tn++; ?> <div class="thumblock"> <div class="tnumber"><?php echo $tn; ?></div> <?php foreach ($images as $img): ?> <a href="<?php echo $img->large->src ?>" style="background-image:url(<?php echo $img->thumb->src ?>);" title="<?php echo $img->title ?>"<?php if ($img->description && $showDesc) { echo ' data-tg-desc="' ."No." . $tn ." " . $img->description . '"';} ?>></a></div> <?php endforeach; ?> </div>
I had to put the thumbnail links inside inline divs to keep the numbers with the thumbnails on mobile phones. it seems to work fine on desktop, tablet and phone now.
here is the css
.tnumber { position: relative; display: inline-block; left: 31px; bottom: 15px; background-color: #303030; color: #f5f5f5; border-radius: 3px; z-index: 99999; width: 16px; height: 18px; } .thumblock { display: inline-block; }
It looks pretty nice on the screenshot.
One thing though is you shouldn't modify view.php directly or you will lose your modifications next time you update Touch Gallery.
The safest way to do it is to create a template and apply it to your block.
To create a template, copy the files view.php and all the css files and put them in the folder root/applications/blocks/touch_gallery/templates/numbered_gallery
From there you can put your page in edit mode, click on your gallery and select design & template and select your template named "Numbered Gallery" from the list and save.
Next time you update the Gallery, your template will remain as it is and not be affected.
May I ask you to please leave a review for the gallery on the gallery page? You can do that here:http://www.concrete5.org/marketplace/addons/touch-gallery1/reviews...
Thank you
One thing though is you shouldn't modify view.php directly or you will lose your modifications next time you update Touch Gallery.
The safest way to do it is to create a template and apply it to your block.
To create a template, copy the files view.php and all the css files and put them in the folder root/applications/blocks/touch_gallery/templates/numbered_gallery
From there you can put your page in edit mode, click on your gallery and select design & template and select your template named "Numbered Gallery" from the list and save.
Next time you update the Gallery, your template will remain as it is and not be affected.
May I ask you to please leave a review for the gallery on the gallery page? You can do that here:http://www.concrete5.org/marketplace/addons/touch-gallery1/reviews...
Thank you
As a result, you can put any text you want inside the link.
The thumbnails are built by a loop so you would need a counter that would increment with the loop.
You would then add the counter's value to the thumbnail inside the link. I suggest you put it inside a <span> tag so you can position it absolutely anywhere you want inside the thumbnail link.