Follow ReviewsForJoomla on Twitter
 
Navigation


How to display more than one main listing image

From Documentation

Jump to: navigation, search

By default, JReviews displays one main (large) image, and other images are displayed in smaller size gallery, based on the settings in configuration.

To display more images in larger size, modify the theme file of the listing detail page: Modifying listing detail page


The code that displays the main image is this:

<?php if((!empty($listing['Listing']['images']) || $this->Config->content_default_image) && $enableIntroImage && $introImage = $Thumbnail->lightbox($listing,0,array('tn_mode'=>$introThumbnailMode,'dimensions'=>array($introThumbnailSize),'id'=>'thumb'.$listing['Listing']['listing_id']))):?>
    <!-- MAIN IMAGE -->
    <div class="itemMainImage" style="width:<?php echo $introThumbnailSize;?>px;"><?php echo $introImage;?></div>
<?php endif;?>


Notice in the code number 0 here: $Thumbnail->lightbox($listing,0 - this is the index of the first image.


To display the second image in larger size, copy and paste the existing main image code, but change the image index number to 1:

<?php if((!empty($listing['Listing']['images']) || $this->Config->content_default_image) && $enableIntroImage && $introImage = $Thumbnail->lightbox($listing,1,array('tn_mode'=>$introThumbnailMode,'dimensions'=>array($introThumbnailSize),'id'=>'thumb'.$listing['Listing']['listing_id']))):?>
    <!-- MAIN IMAGE -->
    <div class="itemMainImage" style="width:<?php echo $introThumbnailSize;?>px;"><?php echo $introImage;?></div>
<?php endif;?>


Do the same for more images, just increase the image index number.


After that, you need to modify the smaller image gallery code to start displaying from the third image (if you have two larger images).


Replace this code:

<?php for($i=(int)$enableIntroImage;$i<$imageCount;$i++):?>


with this:

<?php for($i=2;$i<$imageCount;$i++):?>

$i=2 means the small image gallery will start with image index 2.