main and additional images modal
Hi
Using 1.55
I have changed MY_TEMPLATE/templates/tpl_modules_main_product_image.php so that instead of the js popup it opens in a modal, and works fine.
I would like to do the same with the additional images as well, and possibly in the same modal, so to have "next"/"previous" buttons.
The code for main image is
PHP Code:
<div id="productMainImage" class="centeredContent back">
<div type="button" class="btn btn-lg fz-product-image" data-toggle="modal" data-target="#fz-modal">
<?php
echo zen_image($products_image_medium, $products_name, LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</div>
</div>
<!-- start modal window -->
<div class="modal fade" id="fz-modal" tabindex="-1" role="dialog" aria-labelledby="fz-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="fz-modal-label">
<?php echo $products_name; ?>
</h4>
</div>
<div class="modal-body">
<?php
echo zen_image($products_image_large, $products_name, LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END modal window -->
I played with includes/modules/MY_TEMPLATE/additional_images.php and managed to trigger the modal, but the image loaded would be the small main one, and not the additional one/s, and obviously not "next"/"previous" buttons; as you can guess I basically copied the main image code, and put it in the additional one, commenting out the script part ($script_link)
I just can't interpret all the php, I kinda can imagine some of it what it does, but putting it together to do what I need is just over me.
Thank you.
Re: main and additional images modal
There are other image related plugins that modify how the additional images are grouped into such an effect if you want to see how/what they have modified to support the same or similar operation or if didn't want to reinvent the general effect. These include but are not limited to zen colorbox also zen lightbox. Each of these would bring the image up in the center of the screen, with additional images one could select left/right (next/prev) and there would/could be a background applied to the main page. Clicking on the non-image part generally would restore the page though depending on the plugin and setup other such options might be available.
Re: main and additional images modal
Thank you.
I have downloaded them, and as of now I can't seem to see all the stuff going on, I was hoping for something easier.
If I can't sort it out, I'll consider installing the colorbox, though I'll have to do lots of work to adapt it to my needs.
Re: main and additional images modal
@mc12345678
Thank you for your last comment in colorbox thread, I appreciate, and agree with the time/benefits.
That said I am going to follow both roads (I guess I have too much time!), colorbox customization, and this modal one.
I have done some progress by modifying the includes/modules/MY_TEMPLATE/additional_images.php
Changed these two lines:
PHP Code:
$large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);
$script_link = '<script type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
To:
PHP Code:
$large_link = zen_href_link('<div type="button" class="btn btn-lg fz-product-image" data-toggle="modal" data-target="#fz-modal-1">', 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large . '</div>');
$large_link = zen_href_link( 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large );
$script_link = ($flag_display_large ? '<div type="button" class="btn btn-lg fz-product-image" data-toggle="modal" data-target="#fz-modal-1">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</div>' : $thumb_slashes);
And adding the modal code to includes/templates/MY_TEMPLATE/tpl_modules_additional_images.php.
Doing that it displays the images, and when clicked the modal opens, obviously there are problems:
- no gallery effect (next/previous, and main image)
Which as of now will let as it is, and try to solve the following, being more relevant:
- both (I am testing with two additional images) images display same image, precisely image_02_LRG
My guess is I have to change the code in the modal where it calls the content (image)
PHP Code:
<div class="modal-body">
<?php
echo zen_image($products_image_large, $products_name, LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
?>
</div>
Re: main and additional images modal
Quote:
My guess is I have to change the code in the modal where it calls the content (image)
Wrong guess.
I made some progress:
Using the following makes the modal trigger, and I see next/previous buttons, problem is the image not loading in the modal.
$fz_image_path is supposed to call the image ... I guess (again!)
PHP Code:
$script_link = ($flag_display_large ? '<a class="fz-thumbnail" href="#" data-toggle="modal" data-image="' . $fz_image_path . '" data-target="#image-gallery">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) ;
I tried this
PHP Code:
$fz_image_path = str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link);
And displays the missing image icon, which makes me think I am on the right track ... if I only knew how to get the correct path!
