0

How to create, When click Image and show clicking Image in popup.

This is my code :-

echo "<td>"?><img src="<?php echo $this->getMediaUrl() .'brand'. $data->getImage(); ?>" width="100px" height="100px" class="click-header"></td>

JS Code :-

<script type="text/javascript">
require([
    'jquery',
    'Magento_Ui/js/modal/modal'
], function($, modal) {
    $(document).ready(function() {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            img: '$(".click-header").attr("src", $(this).attr("src"));'
        };
        $(".click-header").on('click', function() {
            $("#header-mpdal").modal(options).modal('openModal');
        });
        // $('.modal-footer').hide();
    });
});
</script>

Out Put Show Blank :-

enter image description here

THANKS.

2 Answers 2

0

We are found the Solution.

---------HTML-------------------

    <div id="popup-modal" style="display:none;">
        <img class="popup-image" src=" " />
    </div>
--------- PHP ------------    
    echo "<td>"?><img src="<?php echo $this->getMediaUrl() .'brand'. $data->getImage(); ?>" width="100px"
        height="100px" class="click-header"></td>

-------- Script --------------    
    <!-- <script type="text/javascript">
    require([
        'jquery',
        'Magento_Ui/js/modal/modal'
    ], function($, modal) {
        $(document).ready(function() {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true
            };
            var popup = modal(options, $('#popup-modal'));
            $(".click-header").on('click', function() {
                console.log($(this).attr('src'));
                $(".popup-image").attr('src', $(this).attr('src'));
                $("#popup-modal").modal("openModal");
                //$("#header-mpdal").modal(options).modal('openModal');
            });
            $('.modal-footer').hide();
        });
    });
    </script>

OutPut :-

enter image description here

THANKS.

0

Try this code:

app/code/VendorName/ModuleName

registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'VendorName_ModuleName', __DIR__);

app/code/VendorName/ModuleName/etc

module.xml

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="VendorName_ModuleName" setup_version="1.0.0">
                <sequence>
        <module name="Magento_Backend"/>
        <module name="Magento_Catalog"/>
        <module name="Magento_Sales"/>
    </sequence>
        </module>
</config>

app/code/VendorName/ModuleName/view/frontend/layout

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="after.body.start">
            <block class="Magento\Framework\View\Element\Template"
                   name="show.image.in.popup"
                   template="VendorName_ModuleName::image_popup.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/VendorName/ModuleName/view/frontend/layout

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="VendorName_ModuleName::js/image_in_popup.js" />
    </head>
</page>

app/code/VendorName/ModuleName/view/frontend/templates

image_popup.phtml

<div id="show-image-popup-modal" style="display:none;">
    <img class="popup-image" src=" " />
</div>

app/code/VendorName/ModuleName/view/frontend/web/js

image_in_popup.js

require([
        'jquery',
        'Magento_Ui/js/modal/modal'
    ], function($, modal) {
        $(document).ready(function() {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true
            };
            var popup = modal(options, $('#show-image-popup-modal'));
            $(".show-in-popup").on('click', function() {
                $(".popup-image").attr('src', $(this).attr('src'));
                $("#show-image-popup-modal").modal("openModal");
                $('.modal-footer').hide();
            });
        });
    });

After that run the below magento commands

php bin/magento setup:upgrade
php bin/magento s:s:d -f 
php bin/magento cache:clean

Now you can add the show-in-popup class to the image tag which you want to show in the popup.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.