implementing bootstrap lightbox modal

[keneso]

Hi

I have made a custom template based on bootstrap, and would like to change the product image "larger image" behaviour from popup window to lightbox modal.

I need the code to associate the correct image (ID) in the code i.e.
from http://getbootstrap.com/javascript/

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       get correct product image
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Of course instead of the button I'd use the <img src="get-correct-product-image">

Hence what I need is the correct code to associate the correct product image.

If need more clarification please ask.

Thank you

[lat9]

What PHP module are you changing for the update? Is this handling only for the product details display, e.g. the product_info page?

[keneso]

Thank you lat9

Yes I am mainly interested in the product_info_display.
I'd guess the module would/should be templates/tpl_modules_main_product_image.php (of course in my override), but if there are some others that need to be addressed please tell me.

[mesnitu]

Thank you lat9

Yes I am mainly interested in the product_info_display.
I'd guess the module would/should be templates/tpl_modules_main_product_image.php (of course in my override), but if there are some others that need to be addressed please tell me.

You have there the info that you need. You just need to change to your modal box, Is not working ?

[keneso]

Thank you mesnitu.

Yes I got it.
Not being a coder I thought it was harder, thus I asked, thanks to your post I read the lines carefully, and to my surprise I understood it! ;)

For someone else needing it, I changed
CUSTOM_TEMPLATE/templates/tpl_modules_main_product_image.php
like this

<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<div id="productMainImage" class="centeredContent back">

<!-- Button trigger modal -->
<div type="button" class="btn btn-lg" data-toggle="modal" data-target="#myModal">
<?php
  echo zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</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>
</div>

[keneso]

For the ones needing it:

If needing the products name in the modal title change (in the above code) this:

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

with

<h4 class="modal-title" id="myModalLabel"><?php echo $products_name; ?></h4>