-
-
Save rubensaid/cff340d17ffa4358025f to your computer and use it in GitHub Desktop.
PrestaShop rollover images solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img class="rollover-images" data-rollover="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.name|escape:html:'UTF-8'}" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class Link extends LinkCore | |
{ | |
/** | |
* Returns a link to a product image for display | |
* Note: the new image filesystem stores product images in subdirectories of img/p/ | |
* | |
* @param string $name rewrite link of the image | |
* @param string $ids id part of the image filename - can be "id_product-id_image" (legacy support, recommended) or "id_image" (new) | |
* @param string $type | |
* @param integer $rollover id of current product | |
*/ | |
public function getImageLink($name, $ids, $type = null, $rollover = null) | |
{ | |
$not_default = false; | |
// legacy mode or default image | |
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : ''); | |
if ((Configuration::get('PS_LEGACY_IMAGES') | |
&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg'))) | |
|| ($not_default = strpos($ids, 'default') !== false)) | |
{ | |
if ($this->allow == 1 && !$not_default) | |
$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg'; | |
else | |
$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg'; | |
} | |
else | |
{ | |
// if ids if of the form id_product-id_image, we want to extract the id_image part | |
$split_ids = explode('-', $ids); | |
$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]); | |
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : ''); | |
if(isset($rollover)) | |
{ | |
$hover_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$rollover.' AND position = 2'); | |
if($hover_image) | |
$id_image = array_shift($hover_image); | |
else | |
return '0'; | |
} | |
if ($this->allow == 1) | |
$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg'; | |
else | |
$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg'; | |
} | |
return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path; | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
function makeRolloverImages() | |
{ | |
$(function() { | |
$('.rollover-images').each(function() | |
{ | |
var newSrc = $(this).data('rollover'); | |
if(newSrc == 0) return; | |
var oldSrc; | |
$(this).hover(function() | |
{ | |
oldSrc = $(this).attr('src'); | |
$(this).attr('src', newSrc).stop(true,true).hide().fadeIn('slow'); | |
}, function() | |
{ | |
$(this).attr('src', oldSrc).stop(true,true).hide().fadeIn('slow'); | |
}); | |
}); | |
}); | |
} | |
makeRolloverImages(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment