Load all gallery images in category on hover (Ajax)

Question

I have a code to load all the gallery images of a product in category, it will work but the problem is that will load ALL gallery images for products in the category (list.phtml) so will increase server load.

<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
    <?php $getimagegalleryresize=0; foreach($_images as $_image){ $getimagegalleryresize++; if($getimagegalleryresize>=2 && $getimagegalleryresize<=5): ?>

           <a class="link" href="<?php echo $_product->getProductUrl(); ?>">  <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->adaptiveResize(275,394); ?>" data-src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->adaptiveResize(275,394); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php  endif; } ?> </a>
    <?php } ?>

I have this code on hover-div so together with jquery-cycle plugin will loop the gallery images from 0-5. The problem is that all images will be loaded on page so if i have 30 products multiple by 5 images each the server will need to load 150 images to prepare them for execute on hover.

What i need is that the category will load 30 products normally with main image and only when user hovers and keep mouseon at the product main_image it will start loading the rest of gallery images. Should i do this through Jquery.load or Ajax and if so , i cannot understand what the load-page.php should include. Anyone can help on this?i am trying so hard but i am not so good in PHP,Ajax and i want to learn.

EDIT:Based on Pankaj and other infos i believe that i should write a module for the ajaxcall instead of trying to load just a loadpage.php. I have created the module and tested url , also test on hover and is working ok. However the controller is empty, just console log "received data ok" so how to make it load the rest of the gallery images?

Here is IndexController.php

    Package_Module_IndexController extends Mage_Core_Controller_Front_Action {
            public function getdataAction(){
                if($data = $this->getRequest()->getPost("key")){

//here starts my tests trying to load product somehow?
                   $_product = Mage::getResourceModel('catalog/product_collection')->toOptionArray();
        $product_id = $this->getRequest()->getParam('id');
        $_product = Mage::getModel('catalog/product')->load($product_id);
        echo Mage::helper('catalog/image')->init($_product, 'small_image');

                }else{
                    echo "unable to receive data !";
                }
            }

        }

And here is my jquery ajax function on hover on list.phtml:

  <span class="hover-image">
<script>
jQuery.ajax({
    url: "http://works/www.devet3est.com/testing/index/getdata",
    type: "POST",
    data: {key: 'value'},
    success: function(response){
        console.log(response);
        return response;
        result = response;  
        jQuery('.hover-image').html(response);

    }
});
</script>


    </span>

EDIT2 reason: cannot getdata of product from controller

I am not sure if the problem is the data type i use for jquery.ajax script (taken from another topic here) or the indexcontroller.php. I am pasting the full experimental indexcontroller.php with lot of garbage but i am trying at least to get some real data from product, even name/price etc then i will continue with gallery images.

<?php class Package_Module_IndexController extends Mage_Core_Controller_Front_Action {
 public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }

    public function getCurrentCategory()
    {       
        return $this->_registry->registry('current_category');
    }

    public function getCurrentProduct()
    {       
        return $this->_registry->registry('current_product');
    }   
        public function getdataAction(){
            if($data = $this->getRequest()->getPost("key")){
             $post = $this->getRequest()->getPost();
     $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($post));

                $_product = Mage::getModel('catalog/product')->setStoreId(Mage::app()->getStore()->getId());
        $_product = $_product->load(Mage::app()->getRequest()->getParam('pid'));

        Mage::register('current_product', $_product );
        Mage::register('product', $_product);




             $productId  = (int) $this->getRequest()->getParam('id');
      $productName  = (int) $this->getRequest()->getParam('name');

      $_product = Mage::getModel('catalog/product')->getId(); 
        $product_name= Mage::getModel('catalog/product')->getName();
        $_product = Mage::getModel('catalog/product');
        $productAttrs = Mage::getResourceModel('catalog/product_attribute_collection');

      $images = [];
    $_product = Mage::getModel('catalog/product')->load(5545);
    foreach ($_product->getMediaGalleryImages() as $image):

        $images[] = Mage::helper('catalog/image')->init($_product, 'image', $image->getFile())->resize(100, 100);

    endforeach;
    echo 'testing at least to check if controller is connected OK gives DATA';
   return $product_name;  
return $images; 
 $post = $this->getRequest()->getPost();
     $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($post));
$response = $wrap->renderView();
        $this->getResponse()->setBody($response);
        $result = "success";
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
exit;
            }else{
                echo "unable to receive data !";
            }
        }

    }

Answer 1

To optimize the speed, You can perform the following steps:

• Create one JS function to call on hover on product Inage and Pass Product SKU as argument.
• Create Ajax call to one Ajax Controller Action
• In Ajax action Load Product and Fetch all the product images and pass response as HTML from action.
• Insert the Response HTML in Gallery images div with unique ID as "gallery_image_{SKU}"
• Apply check in JS function if images are there don't make Ajax call again.

Below linnks give you more understaing about ajax call:

How do i call a controller function in ajax?

https://stackoverflow.com/questions/19383188/module-and-ajax-call

http://javascriptsolution.com/call-magento-controller-using-ajax/

Hope this help!!

Updated: You can Load Images Like below. $images will contain complete image galleries path.

    $images = [];
    $product = Mage::getModel('catalog/product')->load(2);
    foreach ($product->getMediaGalleryImages() as $image):

        $images[] = Mage::helper('catalog/image')->init($product, 'image', $image->getFile())->resize(100, 100);

    endforeach;

Here you can also create Img tag in php and pass that Html code in response.