Simple zoom effect with mouse hover with HTML, CSS and JS

Preview

HTML

<div class="gallery-placeholder">
    <div class="fotorama__stage__frame fotorama__active">
        <img class="fotorama__img" src="<?php echo 'https://kansagra/jaydip/jaydip.jpg'; ?>" >
    </div>
</div>
<div class="gallery-popup fixed-full-popup-model">
    <div class="gallery-zoom-img">
        <div class="gallery-main-img" style=""></div>
    </div>
</div>

CSS

<style>
.gallery-popup {
    cursor: url(../images/zoom-out.svg),pointer;
}
body .gallery-placeholder .fotorama__stage__frame.fotorama__active .fotorama__img {
    cursor: url(../images/zoom-in.svg),pointer;
}
.gallery-popup .gallery-zoom-img .gallery-main-img {
    width: 100%;
    height: 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.fixed-full-popup-model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

JS

<script type="text/javascript">
$(document).ready(function(){
$('body .gallery-placeholder').on('click', '.fotorama__stage__frame.fotorama__active .fotorama__img',function(){
var $this = $(this);
var img = $this.attr('src');
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "url(" + img + ")")
$(".gallery-popup").fadeIn();
$("body").css("overflow", "hidden");
});
$(".gallery-popup").on("mousemove",".gallery-main-img",function(e){
var pixelToMove=100;
var height=$(this).innerHeight();
var newValueY=(e.clientY / height)*pixelToMove;
$(this).css('background-position',0+' '+newValueY+'%');
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
    $(".gallery-popup").fadeOut();
    $("body").css("overflow-y", "inherit");
}
});
$(".gallery-popup .gallery-main-img").click(function(){
$(".gallery-popup").fadeOut();
$("body").css("overflow-y", "inherit");
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "");
});
});
</script> 

After installed Magento 2, got Internal server error due to IfVersion < 2.4

Following .htaccess code is not working in Magento 2

<Files composer.json>
        <IfVersion < 2.4>
            order allow,deny
            deny from all
        </IfVersion>
        <IfVersion >= 2.4>
            Require all denied
        </IfVersion>
    </Files>

Ans.  Just enabled "mod_version" from your server

How to install Postman in Ubuntu 18.04

Step 1 : Download postman from : https://www.getpostman.com/downloads/

Step 2 : Open terminal : #cp -r /home/jaydip/Downloads/Postman/ /usr/local/

Step 3 : #sudo nano /usr/share/applications/Postman.desktop

Step 4 : Paste following text into the terminal screen

[Desktop Entry]
Encoding=UTF-8
Name=Postman
Exec=/usr/local/Postman/app/Postman
Icon=/usr/local/Postman/app/resources/app/assets/icon.png
Terminal=false
Type=Application
Categories=Development;

FYI: Just goto Exec path and check there is Postman available or not?

How to get null attribute product value in magento 1 addAttributeToFilter Filter Query | Where condition

$collection = Mage::getModel('catalog/product')->getCollection()
        ->addAttributeToSelect(['entity_id'])
        ->addAttributeToFilter(
        array(
            array('attribute'=> 'pricegroup','null' => true),
            array('attribute'=> 'pricegroup','eq' => ''),
            array('attribute'=> 'pricegroup','eq' => 'NO FIELD')
        ),
        '',
        'left')
        ->addAttributeToFilter('status', ['eq' => 1]);
echo $collection->getSelect();
echo '<pre>';print_r($collection->getData());exit;

How to upload image file with ajax

jQuery("form#add-group-form").submit(function(e){
        e.preventDefault();
        var formData = new FormData(jQuery(this)[0]);
       
        jQuery.ajax({
            type:"POST",
            url:jQuery(this).attr("action"),
            data:formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(response){
                alert(response);
            }
        });
    });

How to create multidimensional array in jQuery | Javascript

var jaydip = {};
for(var i=0; i < items.length; i++){
   jaydip[items[i]] = items[i]+'123';
}
console.log(jaydip);
alert(JSON.stringify(jaydip));

Re-index primary key in Mysql database table

set @ROW = 0;

UPDATE `visitorhistory` SET `id` = @ROW := @ROW+1 ORDER BY `id` ASC;