Hi David,
Would you please be able to give me a hand implementing this => https://foundation.zurb.com/building-blocks/blocks/ecommerce-product-image-gallery.html
into my site = {link saved}
I have a selection of images of various sizes for each product.
Thanks,
Simon
Hi David,
I couldn't get that to work with Foundation 6 so I have gone with "Starting from a featured image" as detailed here => https://get.foundation/sites/docs-v5/components/clearing.html
I can get it to work but the formatting when the image is clicked is not right as per the example here => https://get.foundation/sites/docs-v5/components/clearing.html
If you click the image on this page ({link saved}) you will see what I mean (using foundation_5.1.0.css).
It has something to do with the foundation.css file. The version that comes with PT is 5.1.0. If I change it to 5.3.3 the image popup works but the whole site seems stretched as per this example => {link saved}
Could you please point me in the right direction?
Thanks,
Simon
Hi Simon,
I should have mentioned this before my apologies but wasn't quite sure what you were looking to implement but it might be easier to use Foundation 5's built-in Orbit class..
https://get.foundation/sites/docs-v5/components/orbit.html
To give this a go, use something like the following in place of the single image code:
<ul data-orbit data-options='timer_speed:5000;pause_on_hover:false;'>
<?php
$i = 1;
while($product_main["image".$i])
{
print "<li><img src='".$product_main["image".$i]."'></li>";
}
?>
</ul>Cheers,
David.
--
PriceTapestry.com
Hi David,
I was really looking for a pop-up feature for images.
I have persevered today and managed a workaround.
I replace the following code in foundation 5.1.0
.visible-img img {
position:absolute;
left:50%;
top:50%;
margin-left:-50%;
max-height:100%;
max-width:100%
}with this from foundation 5.3.3
.visible-img {
height: 95%;
position: relative; }
.visible-img img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
max-height: 100%;
max-width: 100%; }It all seems to be working as it should now.
Thanks for your help with that.
I do intend to use the orbit slider too!
Thanks,
Simon
Hi Simon,
Sure - the easiest way would be to add multiple image fields to your database as Custom Fields finishing the field names with a number e.g. image1, image2, image3.
Then, on your product pages, to create the
<li>elements of the image gallery code you could use:<?php$i = 1;
while($product_main["image".$i])
{
print "<li><a class='sim-thumb' data-image='".$product_main["image".$i]."'><img src='".$product_main["image".$i]."'></a></li>";
$i++;
}
?>
If working with a feed that contains multiple images in a single field using comma separation you can register the same field for each of your custom image1, image2, etc. fields and then use an Explode filter against each one to extract the individual images using a comma as the Explode Character or String and 0 (for image 1), 1 (for image 2) etc. as the return index...
Cheers,
David.
--
PriceTapestry.com