Show images in a div in virtuemart product details page

Your code modifications and patches you want to share with others.
Locked
User avatar
arjuninfo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 113
Joined: Sat Aug 08, 2009 12:50 pm
Location: India ,chennai

Show images in a div in virtuemart product details page

Post by arjuninfo » Thu Apr 01, 2010 7:54 am

Hi,

Here is the code for showing the additional images to show it in the same page (i.e in div) .

First we need to work in theme.php (components\com_virtuemart\themes\default)

change this line

if( $this->get_cfg('useLightBoxImages', 1 )) {



$html .= vmCommonHTML::getLightboxImageLink( $image->file_url, $thumbtag, $title ? $title : $image->file_title, 'product'.$product_id );


}


To


if( $this->get_cfg('useLightBoxImages', 1 )) {

$html .= vmPopupLink( $fully, $thumbtag, 640, 550 );

//$html .= vmCommonHTML::getLightboxImageLink( $image->file_url, $thumbtag, $title ? $title : $image->file_title, 'product'.$product_id );


}

Then goto htmlTools.class.php (administrator\components\com_virtuemart\classes)

Goto line no 1434 and goto this function ....

function vmPopupLink( $link, $text, $popupWidth=640, $popupHeight=480, $target='_blank', $title='', $windowAttributes='' )

comment the old return vmCommonHTML::hyperLink
and
add this code in it ...
return vmCommonHTML::hyperLink( $link, $text, '', $title, "onclick=\"showDiv('targetDiv','$link', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=$popupWidth,height=$popupHeight,directories=no,location=no".$windowAttributes."');return false;\"" );
M.Arjun

User avatar
arjuninfo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 113
Joined: Sat Aug 08, 2009 12:50 pm
Location: India ,chennai

Re: Show images in a div in virtuemart product details page

Post by arjuninfo » Thu Apr 01, 2010 7:58 am

then Goto compoents/com_virtuemart/themes/default/templates/product_details/flypage.tpl.php(your tpl page)

Add this code in top of the page

<script>

function showDiv(objectID,imgName) {
var theElementStyle = document.getElementById(objectID);
var img = "<img src='"+imgName+"' border='0' width='297'>";
theElementStyle.innerHTML = img;
}
</script>


then add this code for the product image(div id is important)

<div id="targetDiv"> <?php echo $product_image ?></div>
M.Arjun

User avatar
arjuninfo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 113
Joined: Sat Aug 08, 2009 12:50 pm
Location: India ,chennai

Re: Show images in a div in virtuemart product details page

Post by arjuninfo » Thu Apr 01, 2010 7:59 am

Now you can view all the images in the same page without open in lightbox or new window ....
M.Arjun

xdenisk
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri May 07, 2010 2:23 pm

Re: Show images in a div in virtuemart product details page

Post by xdenisk » Fri May 07, 2010 4:46 pm

Hello! i do it right you talk about here, but doesn't any effect in my site
http://egoboutique.ru/boutique/index.ph ... t&Itemid=2

additional images doesn't open. like a free space right here at place where would been we waiting an open image

skatebail
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Aug 12, 2010 12:27 am

Re: Show images in a div in virtuemart product details page

Post by skatebail » Thu Aug 12, 2010 12:52 am

Hi!
You can't imagine how this thread helped me, it was exactly what I was looking for.
I did everything as you suggested, but it didn't work. So I did this:
as I stated I did everything as you said, except for theme.php:
I left it the same as it is in a fresh install:

Code: Select all

if( $this->get_cfg('useLightBoxImages', 1 )) {
				
				$html .= vmCommonHTML::getLightboxImageLink( $image->file_url, $thumbtag, $title ? $title : stripslashes(htmlentities($image->file_title,ENT_QUOTES)), 'product'.$product_id );
			}
			else {
				$html .= vmPopupLink($fulladdress, $thumbtag, 640, 550 );
			}
and changed to:

Code: Select all

if( $this->get_cfg('useLightBoxImages', 1 )) {
				
				$html .= vmCommonHTML::getLightboxImageLink( $image->file_url, $thumbtag, $title ? $title : stripslashes(htmlentities($image->file_title,ENT_QUOTES)), 'product'.$product_id );
			}
			else {
				$html .= vmPopupLink( $image->file_url, /*$fulladdress,*/ $thumbtag, 640, 550 );
			}
hope it works, let me know if it's a sketchy way to do it,but I'm not good with php.
By the way, if you'd like to use any jquery zoom for example cloud-zoom or jqzoom
just do this:
1. Insert this inside the <div id="targetDiv"> tag

Code: Select all

<?php echo '<a href="" class="zoom">' ?>
		<?php echo ps_product::image_tag( $product_full_image, 'alt="'.$product_name.'" title="'.$product_name.'"', 0 ); ?>
		<?php echo '</a>' ?>
2.insert this on top of flypage.tpl.php or any flypage you use:
this will wrap the "big" images in an anchor, so that you can use the zoom.
note that I used jQuery and jqzoom, google for them if you don't know what they are.

Code: Select all

<script>
function showDiv(objectID,imgName) {
var theElementStyle = document.getElementById(objectID);
//this will change the html structure inside targetDiv
//it will wrap the clicked image in an <a> tag
theElementStyle.innerHTML = "<a class='zoom' href='"+imgName+"'><img src='"+imgName+"' border='0' width='297'></a>";
jQuery(document).ready(function($) {
//launches the zoom script for the additional images
$(document).ready(function() {
$('.zoom').jqzoom();
});
});
}
</script>
<script>
jQuery(document).ready(function($) {
$(document).ready(function() {
//gets the value of the "src" attribute from any image inside targetDiv
//note that this script is triggered only once when the page is loaded.
//that's why I used jquery again inside the showDiv function
var url = $('#targetDiv img').attr('src');
$('#targetDiv a').attr('href', url);
$('.zoom').jqzoom();
});
});
</script>
Hope this will be useful.
I bet all of this code could've been written in a much nicer way, but I just began learning joomla, jquery and php so don't be too harsh!

sjsj
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Sep 23, 2010 5:08 pm

Re: Show images in a div in virtuemart product details page

Post by sjsj » Thu Sep 23, 2010 5:25 pm

Hi,
Can please help me on jqzoom

i followed your steps updated on the flypage but cant see any zoom ..

can please let me know steps like where to copy jqzoom files and which pages to update .. thanks

ZitaF
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Nov 24, 2010 11:09 pm

Re: Show images in a div in virtuemart product details page

Post by ZitaF » Wed Nov 24, 2010 11:17 pm

Hey,

I did everything that arjuninfo said about showing images in flypage and the thumb of the main photo of the product is opening in the flypage but the thumbs of the additional photos of the product keep opening in an other window :( Is there something extra that i have to do?

thanks


Locked

Return to “Core Hacks and Patches”