[funsella]

Hi,

I hope that I have posted this in the correct section.

I would like to display all images for a single product.
So far I have made the static HTML page which has A lightbox and now I want to build this into my theme.

This is the static HTML

<div class="col colA">

<div class="gallery">

<div class="preview loading">
<!-- this is the first featured image -->													
<img src="images/shop/cube-furniture/featureed.jpg" width="265" height="265" alt="" />

<!-- When clicked it brings up lightbox of all the image full sizes -->
<a href="#enlarges" class="enlarge"><span>Enlarge</span></a>

</div>

<ul class="thumbs">

<li class="on">
<!-- this is the first/featured image when selected it replaces the featured image above  -->
<a href="images/shop/cube-furniture/first-thumb.jpg"><img src="images/shop/cube-furniture/first-medium.jpg" width="57" height="57" alt="" /></a>

<!-- This is the url of the full size image for the lightbox. -->
<a href="images/shop/cube-furniture/first-full-size.jpg" class="enlarge" rel="gallery1"><span>Enlarge</span></a>
</li>

<li>
<a href="images/shop/cube-furniture/second-thumb.jpg"><img src="images/shop/cube-furniture/second-medium.jpg" width="57" height="57" alt="" /></a>
<a href="images/shop/cube-furniture/second-full-size.jpg" class="enlarge" rel="gallery1"><span>Enlarge</span></a>
</li>

<li>
<a href="images/shop/cube-furniture/third-thumb.jpg"><img src="images/shop/cube-furniture/third-medium.jpg" width="57" height="57" alt="" /></a>
<a href="images/shop/cube-furniture/third-full-size.jpg" class="enlarge" rel="gallery1"><span>Enlarge</span></a>
</li>

<li>
<a href="images/shop/cube-furniture/fourth-thumb.jpg"><img src="images/shop/cube-furniture/fourth-medium.jpg" width="57" height="57" alt="" /></a>
<a href="images/shop/cube-furniture/fourth-full-size.jpg" class="enlarge" rel="gallery1"><span>Enlarge</span></a>
</li>

<li>
<a href="images/shop/cube-furniture/fith-thumb.jpg"><img src="images/shop/cube-furniture/fith-medium.jpg" width="57" height="57" alt="" /></a>
<a href="images/shop/cube-furniture/fith-full-size.jpg" class="enlarge" rel="gallery1"><span>Enlarge</span></a>
</li>

</ul>

</div>

</div>

I have figured out how to display a single image but to diplay all the images is really doing my head in.
Any help or links would be great!!

Thanks in advance.

[funsella]

Ok so I have been playing around a bit and managed to get this far

<div class="gallery">

<div class="preview loading">
	<!-- how do iget only the first image to be shown here. As it is its showing all the images -->								
	<? foreach ($product->images as $image): ?>
		<img src="<?= $image->getThumbnailPath(256, 256) ?>"/>
		<a href="#enlarges" class="enlarge"><span>Enlarge</span></a>
	<? endforeach ?>

</div>

<ul class="thumbs">
<!-- this works fine but is it possible to add class="on" to the first li and the rest without a class  -->
<? foreach ($product->images as $image): ?>
	<li>
					
		<a href="<?= $image->getThumbnailPath(256, 256) ?>">
			<img src="<?= $image->getThumbnailPath(57, 57) ?>" />
		</a>
		
		<a href="<?= $image->getThumbnailPath('auto', 'auto') ?>" class="enlarge" rel="gallery1"><span>Enlarge</span></a>	
	
	</li>
<? endforeach ?>
</ul>

</div>

I don't know if what I have done is correct.

Any help would be appriciated

Thanks,

[Aleksey]

Hi!

<div class="preview loading">
	<!-- how do iget only the first image to be shown here. As it is its showing all the images -->								
	<?
		$first_image = $product->images->first;
		if ($first_image):
	?>
		<img src="<?= $first_image->getThumbnailPath(256, 256) ?>"/>
		<a href="#enlarges" class="enlarge"><span>Enlarge</span></a>
	<? endif ?>
</div>

...


<? foreach ($product->images as $index=>$image): ?>
	<li class="<?= $index == 0 ? 'on' : null ?>">
					
		<a href="<?= $image->getThumbnailPath(256, 256) ?>">
			<img src="<?= $image->getThumbnailPath(57, 57) ?>" />
		</a>
		
		<a href="<?= $image->getThumbnailPath('auto', 'auto') ?>" class="enlarge" rel="gallery1"><span>Enlarge</span></a>	
	
	</li>
<? endforeach ?>

I hope this helps.

Thank you

[funsella]

Aleksey, on 31 January 2012 - 03:40 PM, said:

Hi!

<div class="preview loading">
	<!-- how do iget only the first image to be shown here. As it is its showing all the images -->								
	<?
		$first_image = $product->images->first;
		if ($first_image):
	?>
		<img src="<?= $first_image->getThumbnailPath(256, 256) ?>"/>
		<a href="#enlarges" class="enlarge"><span>Enlarge</span></a>
	<? endif ?>
</div>

...


<? foreach ($product->images as $index=>$image): ?>
	<li class="<?= $index == 0 ? 'on' : null ?>">
					
		<a href="<?= $image->getThumbnailPath(256, 256) ?>">
			<img src="<?= $image->getThumbnailPath(57, 57) ?>" />
		</a>
		
		<a href="<?= $image->getThumbnailPath('auto', 'auto') ?>" class="enlarge" rel="gallery1"><span>Enlarge</span></a>	
	
	</li>
<? endforeach ?>

I hope this helps.

Thank you

This worked ... Thank you for your help!