X-Cart forums - Dynamic drive like detailed images mod

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Dynamic drive like detailed images mod (https://forum.x-cart.com/showthread.php?t=14053)

weckie

05-17-2005 12:37 PM

Dynamic drive like detailed images mod

HERE IS HOW TO DO IT... <<<<<< BACKUP FIRST >>>>>>>>>

Put following code into your customer/home.tpl right after <HEAD>

Code:

{literal}

<style type="text/css">



#showimage{

position:absolute;

visibility:hidden;

border: 1px solid pink;

}



#dragbar{

cursor: hand;

cursor: pointer;

background-color: #EFEFEF;

min-width: 100px; /*NS6 style to overcome bug*/

}



#dragbar #closetext {

font-weight: bold;

margin-right: 2px;

}

</style>





<script type="text/javascript">



/***********************************************

* Image Thumbnail viewer- б╘ Dynamic Drive (www.dynamicdrive.com)

* Last updated Sept 26th, 03'. This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/



var ie=document.all

var ns6=document.getElementById&&!document.all



function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body

}



function enlarge(which, e, position, imgwidth, imgheight){

if (ie||ns6){

crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage

if (position=="center"){

pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)

horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2

vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2

if (window.opera && window.innerHeight) //compensate for Opera toolbar

vertpos=pgyoffset+window.innerHeight/2-imgheight/2

vertpos=Math.max(pgyoffset, vertpos)

}

else{

var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX

var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY

}

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"



crossobj.innerHTML='<div align="left" id="dragbar">Slepen/Drag<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Sluiten/Close</span> </div>[img]'+which+'[/img]'

crossobj.style.visibility="visible"

return false

}

else //if NOT IE 4+ or NS 6+, simply display image in full browser window

return true

}



function closepreview(){

crossobj.style.visibility="hidden"

}



function drag_drop(e){

if (ie&&dragapproved){

crossobj.style.left=tempx+event.clientX-offsetx+"px"

crossobj.style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

crossobj.style.left=tempx+e.clientX-offsetx+"px"

crossobj.style.top=tempy+e.clientY-offsety+"px"

}

return false

}



function initializedrag(e){

if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){

offsetx=ie? event.clientX : e.clientX

offsety=ie? event.clientY : e.clientY



tempx=parseInt(crossobj.style.left)

tempy=parseInt(crossobj.style.top)



dragapproved=true

document.onmousemove=drag_drop

}

}



document.onmousedown=initializedrag

document.onmouseup=new Function("dragapproved=false")



</script>{/literal}

Put the following line in the same customer/home.tpl right after:
<BODY leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

Code:

<div id="showimage"></div>

Then replace your modules/Detailed_Product_Images/product_images.tpl with the one below.

Code:

 {* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}

{***

Created bij www.weckonline.com.  NOTE: This line must stay intact for free use. Thanks.  Herman Steijn.

***}

{if $images ne ""}

{capture name=dialog} 

<CENTER>{$lng.lbl_zoom}




{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

[img]{$images[image].tmbn_url}[/img]

{/if}

{/if}{/section}

{literal}

</center>

</body>

{/literal}

</DIV>

{/capture}

{if $smarty.capture.dialog ne ""}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

{/if}

{/if}

That must be it.

Please note that the comment line in the product_images.tpl must stay intact. I would appreciate it very much...

Good Luck.

PS. I will open a new topic about this mod. So in the future please refer to the new topic...

weckie

05-17-2005 12:38 PM

PS. Please give me your web adresses, i like to see it working elsewhere....

weckie

05-17-2005 12:59 PM

In answer to Loony2nz here's how to change location of the images

in the home.tpl find:

Code:

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"

change it to:

Code:

crossobj.style.left=20+"px"

crossobj.style.top=50+"px"

you can use your own position by changing the values.

That will be it.
uhm, yes, I have putted the ZOOMING text in to the code above.

zardos

05-17-2005 04:50 PM

Hi weckie

Thankyou for you time and effort weckie, =D>

My site is below and is not live, have a look around.
Thanks again.

Online Michael

05-17-2005 05:53 PM

No doubt about it, I can see this becoming a very popular mod particularly for those stores who like to have multiple detailed images like mine. Weckie, you have done a wonderful job here mate and I for one congratulate you on a marvelous effort.

Now that we have the building blocks in place, I guess it wonБ─≥t take long before people start making enhancements to it. So as time moves on, this little baby will only get better and better. Can't wait to use it. Must try it out tonight.

Just one little problem I noticed is that whenever any dropdown list boxes happen to be displayed on a page that they seem to appear in the foreground as the detailed image is displayed. How can this be overcome?

Otherwise a superb mod, weckie, simply superb. =D>

weckie

05-18-2005 12:11 AM

Thanks for appreciation all. :oops:

Quote:

whenever any dropdown list boxes happen to be displayed on a page that they seem to appear in the foreground as the detailed image is displayed. How can this be overcome?

I noticed this too. I dont know how to overcome this, maybe somewhone else. Would be a fine tuning to overcome this.

weckie

05-18-2005 12:23 AM

Zardos, i have had a look on your site, works great....

Online Michael

05-18-2005 03:29 AM

In addition to the dropdown list box showing in front of the image, Fancy Categories is also doing the same thing. Any clues anyone?

jdiehl

05-18-2005 06:37 AM

I'm not currently playing or implementing this mod. But I have had issues before with certain things that are placed via CSS not showing layers in the correct order. I believe this has something to do with default settings on the z-index. For example if you don't set the z-index on an object explicity, then your browser might just decide that forms or certain other objects are important enough to be on top and thus puts them there.

Just a suggestion of something to play with to see if you can get around it, only because I've had issues with other objects similar to this in the past. I might be way off base.

IndieDepot

05-18-2005 12:01 PM

My goodness. I love this Mod. it was one of the easiest (and fastest) to install yet delivers a HUGE AMOUNT of functionality for my upcoming website design.

Kudos to you weckie!

- Shannon

weckie

05-18-2005 12:54 PM

Shannon, i had a look at your site, still in working progress. Good luck to it.

The detailed image mod works great at your site too.

regards

weckie

05-18-2005 12:59 PM

i looked at shannons site, she running xcart pro.

She doesn't have the problem with the dropdown list box showing in front of the image????

Anyone knows why this is?
I run normal xcart 4.012 and i have the problem myself.

Maybe someone from xcart knows why this is...

IndieDepot

05-18-2005 02:10 PM

Weckie,

She is a He. My parents knew what they were getting me into when they named me that back in 1972. *smile*

The dropdown in front of the image is on my site as well. And I thought it was normal for CSS. I have never seen CSS go on top of a drop down...on any webpage i have ever visited or made. I have another site that uses CSS and it does the same thing there.

I figured it was someting we had to deal with.

- MR. Shannon W. Rawls

zardos

05-18-2005 02:27 PM

Hi weckie

This problem with the dropdown list box showing in front of the image????
is OK in FF it only does it in IE.

Online Michael

05-18-2005 07:47 PM

Quote:

Originally Posted by zardos

Hi weckie

This problem with the dropdown list box showing in front of the image????
is OK in FF it only does it in IE.

Damn! Sounds like a complicated fix is needed here. :cry:

Just a quick question regarding the thumbnails. I know Weckie had his thumbnails resized to 40X40 (I have mine at 100X100) but it seems to me, and I may be wrong here, that these thumbnails seem to load no quicker than the original full size images themselves. I really haven't noticed any improvement in load times so I'm starting to wonder if we are in fact downloading the full size image and then somehow squeezing it into a 100X100 box. Any potential savings in bandwidth is therefore non existent. Wouldn't it be far better to download the thumbnail and then download the detailed image only when selected? That's how it should work, right?

And while on the subject of image downloads, would everyone here agree that once an image is downloaded that subsequent reloads of the same image should come from cache and not from the server? The reason why I'm bringing this up is because no matter how many times you select to view the same image, the image loads no quicker the last time than the first. :?:

weckie

05-18-2005 11:12 PM

The thumbnails are exactly the same as the full size images only showing smaller as you define in the code.

I will have a look if can get only the thumbnails to display, but i think i need some time here...

About the cache: Isn't this a thing the browser should do??

weckie

05-19-2005 02:22 AM

well i played around a bit, but i can't manage to get the thumbnails since xcart doesn't create thmbnails for the detailed images. (only for the product)
Ofcourse you can create thumbnails for each detailed image but this is a lot of work.

So, i did the following:

next is a new modules/Detailed_Product_Images/product_images.tpl

Code:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}

{***

Created bij www.weckonline.com.  NOTE: This line must stay intact for free use. Thanks.  Herman Steijn.

***}

{if $images ne ""}

{capture name=dialog} 

<CENTER>{$lng.lbl_zoom}






{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

<font size="5">{%image.index%}

{/if}

{/if}{/section}

{literal}

</center>

</body>

{/literal}

</DIV>

{/capture}

{if $smarty.capture.dialog ne ""}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

{/if}

{/if}

This doesn't display images instead of that is displays a number to click on for zooming.
This one will keep the bandwidth low.

Online Michael

05-20-2005 04:21 AM

Weckie,

Nice compromise mate and another fine effort. Great work! The only thing wrong with using numbers is that you have no idea what the image behind them look like so what does the customer do..? The customer clicks on them all in search for the one they really want to see and as a result, bandwidth usage skyrockets. I think the real fix for this mod would have to be something similar to the following:

1) Alter the database to include a provision for a thumbnail for each and every detailed image.

2) The admin area where detailed images are uploaded needs to include a similar field for the thumbnail. Where no thumbnail is provided, a default image is used (on the customer end) that reads "click to view" or something similar.

3) Thumbnails are displayed in the detailed image dialog as a means to link and display the detailed image.

I know it sounds simple (and it's probably not), but this would be a far better and more effective way of presenting images to the ccustomer. It would also lower the bandwidth, and enable fast page loading times too.

I am no programmer, however, I canБ─≥t see why this couldn't be implemented. You only have to look through this forum to see how clever some people are at solving problems. The talent is here, itБ─≥s perhaps a question of will. So what do you reckon guys (and gals), can it be done? Would this proposed fix be any harder than some of the other forum solution?

Online Michael

05-21-2005 06:52 PM

Ok,

I found a solution for the Fancy Categories problem showing up on top of the detailed image. In the CSS section of the code add in the text as shown bellow:

Code:

{literal} 

<style type="text/css"> 



#showimage{ 

position:absolute; 

visibility:hidden; 

border: 1px solid pink; 



z-index: 1;  

    

} 



#dragbar{ 

cursor: hand; 

cursor: pointer; 

background-color: #EFEFEF; 

min-width: 100px; /*NS6 style to overcome bug*/ 

} 



#dragbar #closetext { 

font-weight: bold; 

margin-right: 2px; 

} 

</style>

If the problem persists (see your doctor ;)), just change z-index:1 to 2, then try 3 and so on until the image layer has greater priority. This solution could also be applied to other objects that get in the way such as flash banners etc.

Unfortunately I don't have a fix for the quantity list box problem but it seems to be the way IE treats select boxes as system objects and doesn't
want to show them under other layers. Seems to be more and more an IE issue the longer I look at it. For anyone who has no list boxes showing in the background, then this issue is no issue at all. The mod will work and display just fine as is.

Hope this helps someone.

golfguy

05-28-2005 01:52 AM

Online Michael, your're on the right track. I'm fairly new to x-cart, so I don't know if there is a lot of absolute positioning going on, but the way it works is;

if there are two layers occupying the same x,y corordinate space the layer first in the code shows first, you can override this with zindex.

zindex can be a positive or negitive number. the lowest zindex goes to the bottom.

In the case of this mod no zindex was declared so the drop downs occur in the code first.

Make the zindex in the mod REALLY high, say like 1000. Most programers that use layers set zindex in increments of 50, so they can insert layers in the future without worrying about pecking order.

ttg	06-21-2005 04:39 AM

Hi all,

I am desperate for some help in regards to this mod.

I have implemented it into my site using the {%image.index%} method whereby the shopper clicks on the numbered index, instead of a thumbnail, but wanted to know how I could get this mod to have individually named links that popup the 2nd, 3rd, 4th etc but not the first (the first will always be displayed when shopper clicks to view product details)

All help will be greatly recieved. cheers

(I'm running 4.013)

ttg	06-22-2005 01:49 AM

anyone?

Online Michael

07-11-2005 07:28 AM

Ok, I have a fix I would like to share that will overcome the quantity/amount selectbox problem appearing in the foreground. Basically what this little fix does is it hides the selectbox while the detailed image is displayed and then enables it again when the image is gone.

Insert the following JavaScript code:

Code:

if (ie && !selecthidden) //This will hide the selectbox because IE ignores z-index for selectboxes

        {

        savedhtml = document.all['selectboxfix'].innerHTML;

        document.all['selectboxfix'].innerHTML        = "<span onclick='restoreSelect()'>"+document.forms['orderform'].elements['amount'].value+"";

        selecthidden = true;

        }

Just below the following lines of script in the home.tpl file:

Code:

function enlarge(which, e, position, imgwidth, imgheight){

if (ie||ns6){

Now insert the following line:

Code:

<div id="selectboxfix">

Just below the following lines in the product.tpl file:

Code:

<SCRIPT type="text/javascript" language="JavaScript 1.2">

var min_avail = {$start_quantity|default:1};

var avail = {$mq|default:1}-1;

var product_avail = {$product.avail|default:"0"};

</SCRIPT>

That's it :)

mmondala

08-04-2005 09:15 PM

Re: Dynamic drive like detailed images mod

Hi weckie,

This is a great mod. Unfortunately, it does not work when I applied it. All I get is a blank screen on my Detailed Images section. the pictures disappear when this is applied.

What am I doing wrong? My current version of x-cart is 4.0.14. Can you please help me out. Thank you.

Quote:

Originally Posted by weckie

HERE IS HOW TO DO IT... <<<<<< BACKUP FIRST >>>>>>>>>

Put following code into your customer/home.tpl right after <HEAD>

Code:

{literal}

<style type="text/css">



#showimage{

position:absolute;

visibility:hidden;

border: 1px solid pink;

}



#dragbar{

cursor: hand;

cursor: pointer;

background-color: #EFEFEF;

min-width: 100px; /*NS6 style to overcome bug*/

}



#dragbar #closetext {

font-weight: bold;

margin-right: 2px;

}

</style>





<script type="text/javascript">



/***********************************************

* Image Thumbnail viewer- б╘ Dynamic Drive (www.dynamicdrive.com)

* Last updated Sept 26th, 03'. This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/



var ie=document.all

var ns6=document.getElementById&&!document.all



function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body

}



function enlarge(which, e, position, imgwidth, imgheight){

if (ie||ns6){

crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage

if (position=="center"){

pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)

horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2

vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2

if (window.opera && window.innerHeight) //compensate for Opera toolbar

vertpos=pgyoffset+window.innerHeight/2-imgheight/2

vertpos=Math.max(pgyoffset, vertpos)

}

else{

var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX

var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY

}

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"



crossobj.innerHTML='<div align="left" id="dragbar">Slepen/Drag<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Sluiten/Close</span> </div>[img]'+which+'[/img]'

crossobj.style.visibility="visible"

return false

}

else //if NOT IE 4+ or NS 6+, simply display image in full browser window

return true

}



function closepreview(){

crossobj.style.visibility="hidden"

}



function drag_drop(e){

if (ie&&dragapproved){

crossobj.style.left=tempx+event.clientX-offsetx+"px"

crossobj.style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

crossobj.style.left=tempx+e.clientX-offsetx+"px"

crossobj.style.top=tempy+e.clientY-offsety+"px"

}

return false

}



function initializedrag(e){

if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){

offsetx=ie? event.clientX : e.clientX

offsety=ie? event.clientY : e.clientY



tempx=parseInt(crossobj.style.left)

tempy=parseInt(crossobj.style.top)



dragapproved=true

document.onmousemove=drag_drop

}

}



document.onmousedown=initializedrag

document.onmouseup=new Function("dragapproved=false")



</script>{/literal}

Put the following line in the same customer/home.tpl right after:
<BODY leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

Code:

<div id="showimage"></div>

Then replace your modules/Detailed_Product_Images/product_images.tpl with the one below.

Code:

 {* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}

{***

Created bij www.weckonline.com.  NOTE: This line must stay intact for free use. Thanks.  Herman Steijn.

***}

{if $images ne ""}

{capture name=dialog} 

<CENTER>{$lng.lbl_zoom}




{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

[img]{$images[image].tmbn_url}[/img]

{/if}

{/if}{/section}

{literal}

</center>

</body>

{/literal}

</DIV>

{/capture}

{if $smarty.capture.dialog ne ""}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

{/if}

{/if}

gearboxpc

08-14-2005 03:59 PM

You can't store your images in the database!

Quote:

Originally Posted by weckie

i think the problem is that this code works only if you store the images in your filesystem. In you admin find IMAGES LOCATION, change the settings there....

Hope this helps!

slade

08-14-2005 04:45 PM

qustion

hi i was wonering if theres any way to customise this mod so instead of the image appearing is it posible for the image to load in the detailed image area?

gearboxpc

08-15-2005 08:37 PM

have you installed this on your site?

Have you installed this on your site? Try this link to view how it works.

http://www.gearboxpc.com/xcart/product.php?productid=16135&cat=0&page=1

It does put in the detailed image section.

slade

08-20-2005 04:14 AM

hey gearbox nah i havnt seen that mod cud ya give me the link to the forrum :D

pinnacle

09-24-2005 06:24 PM

gearboxpc, i would like information on that mod as well!

weckie

10-02-2005 09:00 AM

got another great one.
have a look at www.weckonline.nl

greetz

zardos

10-03-2005 12:03 AM

Hi Weckie

Deleted???

weckie

10-04-2005 03:18 PM

hi john, i emailed you a few days ago.

I have had a lot mods selling the last few weeks, please remember me what mod you bought, because i dont remember anymore. Sorry.

PS. You,ve pmd me, so why in the forum again???

MythNReality

12-12-2005 03:48 AM

weckie =D>
Great works... =D>
I love it. I did very minor modification...see it works on my site: http://www.petadorn.com/store/Christmas-Bandanas-pr-16269.html
I have been looking to implement this mode for quite some time now. thank you soooo much!

weckie

12-12-2005 03:51 AM

MythNReality, it works great.

Good luck, and tell the world.

greetz

weckie.

MythNReality

12-12-2005 04:27 AM

Quote:

Originally Posted by weckie

MythNReality, it works great.

Good luck, and tell the world.

greetz

weckie.

Sure, I will...and, one question...I have a tab mode, right now, I had to click on the detail images below to get detail images loaded underneath the existing thumbnail. Can you help me out here? What should I change to get all the thumbnails all show up without click on the "detail images tab"?

Thank you sooo sooo much!

weckie

12-12-2005 04:47 AM

the call to your detailed images mod is somewhere inside the tabbed mod, so i guess you have to move it out of the tabbed mod.
I dont use tabs myself, so i am not sure about it...

greetz
Weckie

MythNReality

12-12-2005 06:06 AM

Yeah...thanks for the hint, I got it removed, now works great!!! :D \:D/

Again, thank you so much~

All times are GMT -8. The time now is 03:08 AM.