A problem - there is a .phtml file in which the value of the function ($ code) is defined and displayed in it. Also in this file the gallery is called (in the modal window, prettyPhoto plugin). You need to get the value of this $ code in a modal window and paste it into the appropriate place. 1. Code from .phtml

if (ISSET($prod['brands']) AND $prod['brands'] != NULL) { $attributes = $prod->getAttributes(); $optId = $prod->getData('brands'); $attributeAddLabel = $attributes['brands']->getFrontend()->getAttribute()->getSource(); foreach ($attributeAddLabel->getAllOptions() AS $option) { if ($option['value'] == $optId) { $code = $option['option_code']; } } } else { $code = '';

  1. Part of the code from the prettyPhoto plugin

  markup: '<div class="pp_pic_holder"> \ <div class="ppt">&nbsp;</div> \ <div class="pp_top"> \ <div class="pp_left"></div> \ <div class="pp_middle"></div> \ <div class="pp_right"></div> \ </div> \ <div class="pp_content_container"> \ <div class="pp_left"> \ <div class="pp_right"> \ <div class="pp_content"> \ <div class="pp_loaderIcon"></div> \ <div class="pp_fade"> \ <a href="#" class="pp_expand" title="Expand the image">Expand</a> \ <div class="manufacturer" style="bottom:30px;"></div>\ <div id="fa-arrows"></div> \ <div class="pp_details" > \

The value of $ code is a string that is inserted as a class in

 <div class="manufacturer {Сюда} " style="bottom:30px;"></div>\

I ask for help, because not quite an expert in js.

    2 answers 2

    If $ code is a global variable, then the output is in the right place:

     <?= $code ?>

    To display a modal window, a simple alert may be appropriate, for example:

     <script language="javascript">alert("<?= $code ?>");</script>
    • Thanks for the answer! Looked - the $ code variable is not global. To make it clearer about the modal window - here's the link where everything happens dev1.pragmacharts.com/damen/sonnenbrillen/test.html . On the page there is a photo with a picture of the brand. It should also be in a modal window (click on the photo). The image is invoked via css, and the css code is pulled just like $ code - Konstantin Erokhov
    • Well, let's start with a simple one. In order for the plugin to work, that is, to display a window, you need to insert the tag <a href="url of a large image" rel="prettyPhoto"> ... </a>. Taken from the plugin manual. now to output the variable to the class: '<div class = "manufacturer <? echo $ code;?>" style = "bottom: 30px;"> </ div>' - Dmitry
    • <div class = "manufacturer <? echo $ code;?>" style = "bottom: 30px;"> </ div> This is what html prints - Konstantin Erokhov
    • The plugin works. Modal window too. I just need to display the value of this variable in the layout, which is formed in the plugin itself - Konstantin Erokhov
    • You said that everything is in one .phtml file. It should contain a section of code that displays a variable on the page. - Dmitriy

    In general, the solution is - 1. In the * .phtml file, add

     <input type="hidden" id="current_brand" value="<?php echo $code; ?>" />

    1. In the PrettyPhoto plugin file add

     $.fn.prettyPhoto = function(pp_settings) { pp_settings = jQuery.extend({ hook: 'rel', /* the attribute tag to use for prettyPhoto hooks. default: 'rel'. For HTML5, use "data-rel" or similar. */ animation_speed: 'fast', /* fast/slow/normal */ ajaxcallback: function() {}, slideshow: false, /* false OR interval time in ms */ autoplay_slideshow: false, /* true/false */ opacity: 0, /* Value between 0 and 1 */ show_title: false, /* true/false */ allow_resize: true, /* Resize the photos bigger than viewport. true/false */ allow_expand: true, /* Allow the user to expand a resized image. true/false */ default_width: 300, default_height: 244, currentBrand:function() { ///////наш код jQuery(document).ready(function() { var q=jQuery('#current_brand').val(); }); return q; }, ..............................................................

    1. and in the same plugin we call in the right place

     markup: '<div class="pp_pic_holder "> \ <div class="ppt">&nbsp;</div> \ <div class="pp_top"> \ <div class="pp_left"></div> \ <div class="pp_middle"></div> \ <div class="pp_right"></div> \ </div> \ <div class="pp_content_container"> \ <div class="pp_left"> \ <div class="pp_right"> \ <div class="pp_content product-view" style="position: relative;overflow: hidden;"> \ <div class="pp_loaderIcon"></div> \ <div class="pp_fade"> \ <a href="#" class="pp_expand" title="Expand the image">Expand</a> \ <!--Здесь вызываем --> <div class="manufacturer '+jQuery('#current_brand').val()+'" style="display: block;margin-top: 20px;height: 78px;width: 230px;position: absolute;top: 400px;z-index: 1000;left: 50px;"></div>\