Jump to content
Sign in to follow this  
DRIVE

[Contribution] POP-UPs MASSAGEed

Recommended Posts

POP-UPs MASSAGEed

This simple contrib will pop-up your product images in the center of the users screen.

This replaces OSC's popup window for product images. The replacement uses a layer.

Thus, it does not generate approval notices for pop-ups to the user (because it is not a pop-up).

It is a layer that closes with a click (it's also draggable for inclined browsers).

You can customize top-bar background color and "close window" text color.

Cross-browser implementation is considered in the code*

Tested with IE6+, Netscape 6+, FireFox 1+

Share this post


Link to post
Share on other sites

Hey, thank you for this simple but very effective contribution!

 

I modified it a little to suit my needs, because

 

1. I wanted to put a blank image on top of the product image to disable users from copying the file

2. I wanted to put alternative content for users with javascript disabled like in the original product_info.php, because now, if a user has disabled javascript, the product image will be shown twice.

 

Just to share what I did and find possible errors in my code, here are the changes I made:

 

1. in enlarge.js

 

I replaced:

 

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x]  </span> </div><img src="'+which+'" onClick="closepreview();">'

 

with:

 

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">[x]  </span> </div><div style="background-image:url('+which+')"><img src="images/pixel_blank.gif" width="'+imgwidth+'" height="'+imgheight+'" onClick="closepreview();"></div>'

 

 

2. in product_info.php (Step 6 in the Help file)

 

-Instead of the suggested replacement-

I replaced:

 

<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT , 'hspace="5" vspace="5"') . '</a>'; ?>');
//--></script>

 

with:

 

<script language="javascript"><!--
document.write('<?php if (is_file(DIR_WS_IMAGES . $product_info['products_image'])) {
							  list($w, $h) = getimagesize(DIR_WS_IMAGES . $product_info['products_image']);
							  echo '<a href="#" onclick="return enlarge(\\\'' . DIR_WS_IMAGES . $product_info['products_image'] . '\\\',event,\\\'center\\\',' . $w . ',' . $h . ');return false;">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a><br>';
							   } else { echo tep_image(DIR_WS_PRODUCT_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"');
}
?>');
//--></script>

 

 

Thanks again for this contribution,

Patrick

Share this post


Link to post
Share on other sites
You contri can not work with image magic and mopics i have try all now.

So please write that in you readme file

 

Very sorry it didnt work for you. The readme file states that it is meant for the standard OSC pop-up code. The contrib has generated quite a bit of interest so as I/We (community members who have already contributed to the code) integrate compatibility with other image contribs, we'll list them. It wouldn't make sense to try and list ones that it is not compatible with :D

Share this post


Link to post
Share on other sites
Hey, thank you for this simple but very effective contribution!

 

I modified it a little to suit my needs, because

 

1. I wanted to put a blank image on top of the product image to disable users from copying the file

2. I wanted to put alternative content for users with javascript disabled like in the original product_info.php, because now, if a user has disabled javascript, the product image will be shown twice.

 

Just to share what I did and find possible errors in my code, here are the changes I made:

 

1. in enlarge.js

 

I replaced:

 

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x]  </span> </div><img src="'+which+'" onClick="closepreview();">'

 

with:

 

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">[x]  </span> </div><div style="background-image:url('+which+')"><img src="images/pixel_blank.gif" width="'+imgwidth+'" height="'+imgheight+'" onClick="closepreview();"></div>'

 

 

2. in product_info.php (Step 6 in the Help file)

 

-Instead of the suggested replacement-

I replaced:

 

<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT , 'hspace="5" vspace="5"') . '</a>'; ?>');
//--></script>

 

with:

 

<script language="javascript"><!--
document.write('<?php if (is_file(DIR_WS_IMAGES . $product_info['products_image'])) {
							  list($w, $h) = getimagesize(DIR_WS_IMAGES . $product_info['products_image']);
							  echo '<a href="#" onclick="return enlarge(\\\'' . DIR_WS_IMAGES . $product_info['products_image'] . '\\\',event,\\\'center\\\',' . $w . ',' . $h . ');return false;">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a><br>';
							   } else { echo tep_image(DIR_WS_PRODUCT_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"');
}
?>');
//--></script>

 

 

Thanks again for this contribution,

Patrick

 

Patrick,

 

Good eye on the part about users having Javascript disabled. I will incorporate that code into the next release and also put notes and a link to your post about customizing it further to prevent users from right-click downloading.

 

Thanks for posting your code. Looks good :thumbsup:

Share this post


Link to post
Share on other sites

I am having an issue with ie 7 it pops up, but I do not see an image.

Its working great with firefox!

:'( :'(

Share this post


Link to post
Share on other sites
I am having an issue with ie 7 it pops up, but I do not see an image.

Its working great with firefox!

:'( :'(

 

Did you apply Patricks code in the post above? If so, the only thing I can think of is that there is an issue with "images/pixel_blank.gif". Try the standard code from the download package if you've applied Patricks code. If you're using the original code, send me a link to where I can take a look.

 

(the issues with pixel_blank.gif could be that it does not exist, or it is not transparent)

Edited by DRIVE

Share this post


Link to post
Share on other sites

-- Modified install instructions (thanks Patrick D aka hiklot)

-- added 'addslashes' to restore legacy OSC HTML output for products_name in alt/title

-- added credits/tips section at bottom of readme.htm file

 

Download POP-UPS MASSAGEed V1_3

Share this post


Link to post
Share on other sites
Did you apply Patricks code in the post above? If so, the only thing I can think of is that there is an issue with "images/pixel_blank.gif". Try the standard code from the download package if you've applied Patricks code. If you're using the original code, send me a link to where I can take a look.

 

(the issues with pixel_blank.gif could be that it does not exist, or it is not transparent)

 

 

 

Here is the link.

I did not use Patricks code yet.

 

http://www.feedroller.com/Store/product_in...products_id=948

 

Thanks for the help :blush:

Share this post


Link to post
Share on other sites
Here is the link.

I did not use Patricks code yet.

 

http://www.feedroller.com/Store/product_in...products_id=948

 

Thanks for the help :blush:

 

 

I found out the issue.

I am was using some javascript that allows me to have transparency for my .png's (ie 6 does not allow png's trans).

 

Thanks again

Share this post


Link to post
Share on other sites
I found out the issue.

I am was using some javascript that allows me to have transparency for my .png's (ie 6 does not allow png's trans).

 

Thanks again

 

Glad you got it fixed :thumbsup: Your site looks great and I see the image is working now. I know three guys who started a business like that and 5 years later they sold it for 11 million.

 

ps - thanks for posting your fix. I wish more people would do that so other users can benefit from what the "fixes" involve :)

Edited by DRIVE

Share this post


Link to post
Share on other sites

James, you've got a good thing going here... have bookmarked the contrib, but have a few suggestions....

 

Done --> Do your contrib for people without Java... Have not checked latest version if this has been done...

Make the heading the same as those of the info boxes... Must be called name of product + have an (x)

 

Ideas from other contribs I have going...

 

Maximize the popup to no bigger than the screen size... If image is bigger than screen resolution, scale it down...

Disable right click on images... (error message to the pirates)...

Watermark; nothing fance : copyright company name --> maybe use the blank overlay for that

 

Those are a few I'm pulling out of my hat now... :D

 

 

Thanks for the contrib, looking forward to installing it sometime soon...

Edited by rkscscc

Riaan

Share this post


Link to post
Share on other sites

http://www.oscommerce.com/community/contributions,4568

http://www.oscommerce.com/community/contributions,4569

 

oscFileBrowser and oscExtraImages

 

Just thinking, just spotted those 2 contribs.... First one has nothing to do with this, but second one you might want to think about... If you had multiple images, could it be displayed with the JAVA popup?


Riaan

Share this post


Link to post
Share on other sites

My comments in green :D

James, you've got a good thing going here... have bookmarked the contrib, but have a few suggestions....

Thank you, and thank you for your comments and suggestions:)

Done --> Do your contrib for people without Java... Have not checked latest version if this has been done...

Make the heading the same as those of the info boxes... Must be called name of product + have an (x)

Possibly a good idea but some people want the bar of the Layer to be red, or green, or something different from everything else on the site. The color is easy enough to customize so my thought is that they can simply insert the color that their infoBoxes use if that's what they want. Also, the image can close with a click anywhere on it. Some people have "Click Image to Close".

Ideas from other contribs I have going...

 

Maximize the popup to no bigger than the screen size... If image is bigger than screen resolution, scale it down...

How BIG do you want the larger images to be? :D It already gets the incoming image size and scales and centers the Layer so it would seem to me that even on some poor schlubs computer who is using 800x600 res, you can have very large "larger" images with superb quality. Your idea is good but there is a hell of a lot of coding that would need to be done to acheive that level of functionality (to truly scale the images, not a hack that does the math to change the physical but not file size yet keeps the aspect-ratio). I wanted this contrib to be simple and easy to install so that the greatest number of OSC users could benefit from it if they want to use it. Some contribs are so complicated that your average user cannot install them or even begin to understand what to do if they have problems. Perhaps a "POP-UPs MASSAGEed Advanced" could be a project where GD Lib or ImageMagik is used for that (addressed in your next post).

Disable right click on images... (error message to the pirates)...

Watermark; nothing fance : copyright company name --> maybe use the blank overlay for that

Patrick (aka hiklot) has a tweak that is listed in the forum and linked from the readme.htm install file that can achieve the watermark and prevents most users from right-click downloads. My thought is that if I can see it, I can get it. NUMEROUS ways. These days, people who want to steal images are not your typical "right click downloaders". They know what they are doing. The best way (IMHO) is to use watermarks that are sophisticated enough to make it take hours to remove them, yet not destroy or detract from the image you are trying to display. Instead of using a transparent blank image, the user can simply make a transparent watermark (talking about the transparent deal Patrick tweaked).

 

I do not think this contrib should use any coding that does image re-scaling or automatic watermarks by the server on-the-fly. There is too much overhead and it would make the Layer dead-dog-sloooooow particularly on shared systems. Watermarks and image scaling would best be handled at the point where the administrator is inserting product images. (just my opinion!).

 

Not in the next release, but the one after that I will put in an optional switch that will "do something" if right-clicked. I'll stick something in there that will satisfy the people who want that functionality.

 

Those are a few I'm pulling out of my hat now... :D

Got any coding in the hat? :- :rolleyes:

 

 

Thanks for the contrib, looking forward to installing it sometime soon...

It works great, but plenty of room for improvement for sure.

Share this post


Link to post
Share on other sites
http://www.oscommerce.com/community/contributions,4568

http://www.oscommerce.com/community/contributions,4569

 

oscFileBrowser and oscExtraImages

 

Just thinking, just spotted those 2 contribs.... First one has nothing to do with this, but second one you might want to think about... If you had multiple images, could it be displayed with the JAVA popup?

 

 

I am very familiar with both of the contribs you mention and both are very nice. Yes, POP-UPs MASSAGEed can work with multi-image contribs (with modification to the code generated for each clickable image, it doesn’t work with them 'as-is'). The critical place where the code is modified is in products_info.php where the code for clickable images is generated and/or other areas for contribs that have other or supplemental altered or new files.

 

I want to say again that in my view, the best place to do scaling of images or application of watermarks by the server should be at the point where the administrator is adding or modifying product images. This contrib already works with On-the-fly-thumbnailer (2.2) (which can use caching to also avoid the overhead of thumbnailing every request for an image on-the-fly).

 

A couple of us (myself and another code-jockey) have taken a look at several of the contribs that allow for additional images. This contrib can be easily added into any of those contribs (and those authors are quite welcome to do so). For example, we took a very long look at "More pics 6 v1.3b (clean & beauty)" last weekend. This contrib can be integrated so that it works with that contrib (as well as many others) easily. The problem is that it requires re-writing large sections of the code those authors are using, which I consider a major code fork, not very nice, and also we'd inherit having to support and update an entirely new contrib (or not support it which would be bogus).

 

On contribs such as those that are highly sophisticated and regularly updated, I would prefer to let those authors use the code as/if they wish. There is no way to make a "plug-in". It isn't mine, just something I put together based on work by others and a little bit by myself. If the authors want to use POP-Ups MASSAGEed and integrate it, I think that is best. For other multiple-image contribs where code modifications are minimal, we'll take a look at integrating them.

 

My idea was to get this simple version bug-free and useable by just about anyone. I want this basic version to be able to be used by your average OSC user without too much trouble and avoid having this forum or the download page get cluttered with integrations into multi-image contribs like the More_Pics one. Those types are much more complex and users would be best suited to have it integrated there as part of the package (just my view, so don’t worry about hurting my feelings.... post whatever you want)

 

With a couple of the contribs that use FCKeditor or HTMLarea with the fileBrowsers/uploders etc. FCKeditor is already being worked on with a plug-in that will allow the user to plug this contrib directly into the button bar and assign inserted images to use the Layer pop-up (very similar to assigning text to a hyperlink). I don't know when it will be ready but it is being worked on.

 

POP-UPs MASSAGEed can work with any multiple image contribution. You mentioned osCfilebrowser. POP-Ups MASSAGEed will already work with that one. I took a cursory look at the one for oscExtraImages and there is only one place where we need to use the loop for the additional images and assign the incoming image-width/height to the code that runs the link to the layer for each extra image. Problem is getting enough "extra" time to work on it :)

 

Sorry for such a long post... I tend to get windy and the more I try to shorten, the longer some paragraphs become :)

 

Thanks again for your interest and comments.

 

All code contributions are welcomed :P

 

Share this post


Link to post
Share on other sites
Got any coding in the hat? :rolleyes:

 

I have the best coding in the world!If you want your shop to be screwed up quickly contact me now! :lol:

 

I spent 2 hours last night moving one piece of code around to make a horizontal scroll bar fit in the index.php and underneath the headings, so I wouldn't trust myself with coding where it comes to PHP and Java.... :thumbsup:

 

On the large image issue

I have a 19" Wide screen, running at 1440x900... Check out this page, click the image and be amazed... I'm seeing about 60% of the image only because it's so big, don't want to know what happens when Jo Soap click the image with his 800x600 screen.... I hear you when you say it's a lot of coding, but I hope you understand that my only meaning was for osc to be customer fitted instead. If a customer has a max resloution, scale the image if same>bigger resolution to 80%XX%.... (On a side note for those reading this ,ImageStretchFix is one contrib I have that are making my thumbs look great without an GD libraries-- Still can't get that one licked)

 

On the watermark/rightclick

Agreed, any extra strain placed on the script/server will make it slower. It's such a mission anyway to try and get osc optimized, that I think the best solution(for me anyway) would just be to get into Photoshop and watermark all the images... (Idea to self, take small company logo and paste it all over background, place one big one on image self). Saying that I agree that it's the shopowners responsibility to make sure the pictures are picture perfect, not the servers... If you want to make a good show, put in the time!

 

On the headings for images box

Agreed, color is very easy to optimize, but having a look at my site, I've got 3D info boxes, nice and shiny... Question here--> I haven't looked at the stylesheet yet, but would that be possible to do if I break enough other stuff? :lol: :lol:

/* Begin NewBoxtop */

TD.infoBoxHeadingNew {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background-image: url('images/infobox/corner_right_left.gif');

color: #ffffff;

}

/* End NewBoxtop */

This is the code i have for the infoboxes, so I'm taking a stab in the dark... would the background-color on your stylesheet be extremely upset with me <_< if i changed it to background-image like above? (image is just center piece of 3d image) again, just a stab in the dark...

 

Also, the position of the close(x)...

#dragbar #closetext{
font-weight: bold;
margin-right: 0px;

would margin-center be able to move the close button to the middle? Any chance of that displaying the shop name, product name?

 

You've got a great contrib here and I applaud you for the work you have already done! Thanks for your replies, time and effort! I hope this contrib gets a big following, I surely will follow it!


Riaan

Share this post


Link to post
Share on other sites

What would cause my store to go back to the Main Catalog page when I click on my thumbnail. I have done everything that the readme told me to do... any help would be appreciated.

Share this post


Link to post
Share on other sites

double check all the code, get this: http://www.winmerge.org and compare the original code with the code you have now.... I haven't installed this contrib so can't point you to something specific, but you will see it very quickly if you do the comparisons....


Riaan

Share this post


Link to post
Share on other sites
double check all the code, get this: http://www.winmerge.org and compare the original code with the code you have now.... I haven't installed this contrib so can't point you to something specific, but you will see it very quickly if you do the comparisons....

 

The only thing that it shows different are the two areas that the readme file tells me too change.

 

Original Code:

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

 

New Code:

document.write('<?php if (is_file(DIR_WS_IMAGES . $product_info['products_image'])) {
                     list($w, $h) = getimagesize(DIR_WS_IMAGES . $product_info['products_image']);
                     echo '<a href="#" onclick="return enlarge(\\\'' . DIR_WS_IMAGES . $product_info['products_image'] . '\\\',event,\\\'center\\\',' . $w . ',' . $h . ');return false;">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a><br>';
                     } else { 
                       echo tep_image(DIR_WS_PRODUCT_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"');
}
?>');

Share this post


Link to post
Share on other sites
What would cause my store to go back to the Main Catalog page when I click on my thumbnail. I have done everything that the readme told me to do... any help would be appreciated.

 

That is usually caused by either missing or improperly doing step 2 or step 5 (step 5 most likely). Feel free to send a link if you continue to have trouble, either PM me or post it here... lots easier to troubleshoot. Or, post the source code of a product page that is not working correctly.

Share this post


Link to post
Share on other sites
That is usually caused by either missing or improperly doing step 2 or step 5 (step 5 most likely). Feel free to send a link if you continue to have trouble, either PM me or post it here... lots easier to troubleshoot. Or, post the source code of a product page that is not working correctly.

 

PM sent... thanks in advance for your help.

Share this post


Link to post
Share on other sites

My comments in GREEN

 

I have the best coding in the world!If you want your shop to be screwed up quickly contact me now! :lol:

 

I spent 2 hours last night moving one piece of code around to make a horizontal scroll bar fit in the index.php and underneath the headings, so I wouldn't trust myself with coding where it comes to PHP and Java.... :thumbsup:

 

On the large image issue

I have a 19" Wide screen, running at 1440x900... Check out this page, click the image and be amazed... I'm seeing about 60% of the image only because it's so big, don't want to know what happens when Jo Soap click the image with his 800x600 screen.... I hear you when you say it's a lot of coding, but I hope you understand that my only meaning was for osc to be customer fitted instead. If a customer has a max resloution, scale the image if same>bigger resolution to 80%XX%.... (On a side note for those reading this ,ImageStretchFix is one contrib I have that are making my thumbs look great without an GD libraries-- Still can't get that one licked)

I see what you mean. Its a cool effect but it cuts off the image and there is no scrolling, so I cant see the product fully. Also, that image is nearly 900k which is rather large. To me, I believe it is safe to assume a user has at least 800x600 resolution. If they dont, they probably arent going to buy anything from you anyway. So my point is that with an image that was 800px wide, you could have a beautiful image with plenty of detail and the file size would probably only be around 150k or so. If I wanted to provide an even larger image, I would probably add a thumbnail to the product description (if you have FCKeditor or HTMLarea installed) and then link it to a blank page so the user could resize/scroll etc etc and see the whole image. The way it is now, noone can see the entire image unless their monitor is set at 1800w or greater. I understand what you want to do. It can probably be accomplished with putting a style on the image and setting width and height to 100% but it would definitely be buggy (not work) for many users. I'm not sure if/when I'd do any dynamics beyond what's there. it already accomodates any image size so to me it makes more sense to have your larger image for the pop-ups to be predetermined at around 800px wide, and then think about adding extra pics--like "Click here for a 1800x1900 image" or something. You've done a great job with the site... looks nice... I'd fix that issue with not being able to see the whole image though because I'd bet a good 90% of users do not have screens that are 1800px wide :)

 

On the watermark/rightclick

Agreed, any extra strain placed on the script/server will make it slower. It's such a mission anyway to try and get osc optimized, that I think the best solution(for me anyway) would just be to get into Photoshop and watermark all the images... (Idea to self, take small company logo and paste it all over background, place one big one on image self). Saying that I agree that it's the shopowners responsibility to make sure the pictures are picture perfect, not the servers... If you want to make a good show, put in the time! There are contribs that can do the watermarks on the fly. I'm not against on-the-fly scaling/watermarking provided there is image caching available. That way, you as the shop owner/site-checker will probably be the first to generate the cached files since you will be dutifully checking your work/product insertion :thumbsup: And if you goof up an image and decide to delete the cached version so it regenerates, you will be checking it again, thus "pre-generating" the cached images. Theres an ImageMagik contrib that does awesome stuff, including the scaling and adding your watermark to the image. I have a few clients that use the contrib but the odd thing is they have to manually edit their images anyway, so I've trained a couple of them to open their transparent watermark in their graphics editor and paste it on each image (the large image) they are resizing (like coming off a digital camera where the image is 3500px wide or even larger). Resize the image, paste the watermark on there, export it, assign it to a product and the thumbnail is created with the watermark since the 'parent' image has it. This assumes that a person is using something like On-the-fly thumbnailer that creates the thumbnails automatically.

 

On the headings for images box

Agreed, color is very easy to optimize, but having a look at my site, I've got 3D info boxes, nice and shiny... Question here--> I haven't looked at the stylesheet yet, but would that be possible to do if I break enough other stuff? :lol: :lol:

Ya, your boxes look cool. Cant even tell its an OSC site hardly. Cool bananas :)

I believe there is a way to make the top-bar 3-D. I think the layer will accomodate a table. So, you'd have three cells with the left and right corners fixed width and the center just as it works with the infoboxes now (expanding/tiling to the 100% width of the pop-up Layer [*with your left and right corners of course]). You can give it a shot and if you cant get it, I might have time later tonight to give you a demo and some code. In enlarge.js, it would be something like this.

crossobj.innerHTML='<div align="right" id="dragbar"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td><img src=yourleftcorner.gif></td><td background="yourcentertile.gif" (or assign a class/style for the background)></td><td><img src="yourrightcorner.gif"><span id="closetext" onClick="closepreview()">Close Window [x]  </span></td></tr></table></div><img src="'+which+'" onClick="closepreview();">'

 

I haven't tested the above. Thats just to give you a clue where to start. There might be some more tweaks involved so the styles/div-styles dont collide.

 

This is the code i have for the infoboxes, so I'm taking a stab in the dark... would the background-color on your stylesheet be extremely upset with me <_< if i changed it to background-image like above? (image is just center piece of 3d image) again, just a stab in the dark...

 

Also, the position of the close(x)...

#dragbar #closetext{<BR>font-weight: bold;<BR>margin-right: 0px;

would margin-center be able to move the close button to the middle? Any chance of that displaying the shop name, product name?

margin-center wouldnt work but margin-right: 100px; would, or margin-right: 4em; ..... text-align: center; might work but may not be consistent in the three major browsers (IE, NS, FF).

 

You've got a great contrib here and I applaud you for the work you have already done! Thanks for your replies, time and effort! I hope this contrib gets a big following, I surely will follow it!

 

Thanks for all your comments and feedback. Let me know if I missed anything or was not clear :)

Edited by DRIVE

Share this post


Link to post
Share on other sites
That is usually caused by either missing or improperly doing step 2 or step 5 (step 5 most likely). Feel free to send a link if you continue to have trouble, either PM me or post it here... lots easier to troubleshoot. Or, post the source code of a product page that is not working correctly.

 

I lost your PM so I have to reply here. You are missing step 5. You dont have the placeholder for the pop-up Layer below the body tag :)

 

Step 5<BR>In products_info.php just after<BR><body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" (and there might be other crap here)><BR>add this:<BR><!-- Placeholder POP-UPs MASSAGEed Layer --><BR><div id="showimage" z-index="1024"></div><BR><!-- Placeholder POP-UPs MASSAGEed Layer -->

 

Your site only has <body> so add the Placeholder code below that and it will take off

 

 

 

 

 

<H5></H5>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×