Jump to content
Sign in to follow this  
DRIVE

[Contribution] POP-UPs MASSAGEed

Recommended Posts

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

 

Sorry, the forum goofed me up and locked me from editing the post...

 

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

 

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

It will look like this:

<body>
<!-- Placeholder POP-UPs MASSAGEed Layer -->
<div id="showimage" z-index="1024"></div>
<!-- Placeholder POP-UPs MASSAGEed Layer -->

Share this post


Link to post
Share on other sites
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>

 

I see what you are talking about and it is located on lines 36-38. And I added <body> tag... does that need to be above or below <body marginwidth.......>

Edited by justtech

Share this post


Link to post
Share on other sites
I see what you are talking about and it is located on lines 36-38. And I added <body> tag... does that need to be above or below <body marginwidth.......>

 

 

You do not have the code for the Placeholder on product_info.php which is where it needs to be.

 

You have this:

.style16 {color: #FFFFFF}
-->
</style>
</head>
<body>

<div align="center">
 <!-- ImageReady Slices (runin-index.psd) -->

 

it should look like this:

 

.style16 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- Placeholder POP-UPs MASSAGEed Layer -->
<div id="showimage" z-index="1024"></div>
<!-- Placeholder POP-UPs MASSAGEed Layer -->
<div align="center">
 <!-- ImageReady Slices (runin-index.psd) -->

 

*sorry for the goofed up code. I switched to normal text editor in my pref's and hopefully the board will now write my code blocks correctly :)

Edited by DRIVE

Share this post


Link to post
Share on other sites
You do not have the code for the Placeholder on product_info.php which is where it needs to be.

 

You have this:

.style16 {color: #FFFFFF}
-->
</style>
</head>
<body>

<div align="center">
 <!-- ImageReady Slices (runin-index.psd) -->

 

it should look like this:

 

.style16 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- Placeholder POP-UPs MASSAGEed Layer -->
<div id="showimage" z-index="1024"></div>
<!-- Placeholder POP-UPs MASSAGEed Layer -->
<div align="center">
 <!-- ImageReady Slices (runin-index.psd) -->

 

*sorry for the goofed up code. I switched to normal text editor in my pref's and hopefully the board will now write my code blocks correctly :)

 

Okay... now I see where you are talking about. That fixed it. Thanks for the help.

For future reference I would like to post the quick answer to my problem for any further searchers to find....

If you are running STS Template Contrib., you need to add Step 5 to your "Template Page" right under the <body> tag.

 

Thanks so much for your help Drive.

Share this post


Link to post
Share on other sites
Okay... now I see where you are talking about. That fixed it. Thanks for the help.

For future reference I would like to post the quick answer to my problem for any further searchers to find....

If you are running STS Template Contrib., you need to add Step 5 to your "Template Page" right under the <body> tag.

 

Thanks so much for your help Drive.

 

You are most welcome :) Your images and the Layer look great. Good luck with the site! I'll add your STS observation into the readme file which I will update tonight. Glad you spotted that (but wish you had mentioned you had STS to begin with :rolleyes: lol ). A lot of users use STS so you've added a lot of benefit - thank you :)

Share this post


Link to post
Share on other sites
You are most welcome :) Your images and the Layer look great. Good luck with the site! I'll add your STS observation into the readme file which I will update tonight. Glad you spotted that (but wish you had mentioned you had STS to begin with :rolleyes: lol ). A lot of users use STS so you've added a lot of benefit - thank you :)

 

The site that I am working on is definitely a work in progress, and thanks to great contributions like this one, it's starting to get where the owner of the store is wanting it (professional looking). Sorry about not informing you about the STS...

Share this post


Link to post
Share on other sites

James, that site I showed you with the images are not mine... I'm their competition...

 

Don't have the money to get a good webdesigner, but I'm sure going to kick ass on prices :D

 

My site is still getting built, had to restart from scratch because of a stupid bug or something, still don't have an answer to my problem.... you can check out my site in building here, just let it be known that if it gives DB errors or any errors, I'm busy uploading a newer version, so check it out in 5 minutes or so....

 

RKS Computer Solutions Online Shop


Riaan

Share this post


Link to post
Share on other sites
James, that site I showed you with the images are not mine... I'm their competition...

 

Don't have the money to get a good webdesigner, but I'm sure going to kick ass on prices :D

 

My site is still getting built, had to restart from scratch because of a stupid bug or something, still don't have an answer to my problem.... you can check out my site in building here, just let it be known that if it gives DB errors or any errors, I'm busy uploading a newer version, so check it out in 5 minutes or so....

 

RKS Computer Solutions Online Shop

 

Ahhh... I see. Well, they must not test on multiple platforms because their image pop-up isnt doing them much good since you cant see it unless you have a resolution of 1800w or higher.

 

Keep your design simple and clean. People care more about ease of navigation, prices and customer service than anything else :)

 

I tested a couple of things. I downloaded that humongous laptop image from your competitor :), and I tested it with On the Fly Thumbnailer and this contrib..... it made a beautiful thumbnail of very high quality and it also popped up the image in the layer which was huge, but it had horizontal and vertical scrollbars so at least any user could see the whole image albeit some scrolling. I've never tried and image that was larger than the resolution on this PC - 1280x1024 - and it was good to know that it has that behaviour.

 

Anyway, I worked out your issue with wanting 3-D top-bar for the Layer. It will be the same as your infoboxes. You just have to change your left,center and right images to the ones on your site. Obviously (hopefully), a person could also make different color corners and center background to have the same "look" as the site, but a different color to make the Layer stand out a bit more. One hang-up is that you lose the draggability of the Layer which won't matter to most people. I messed around with the javascript for a while but once I saw the scope of what would need to be done to make it draggable with other images in the layer I said forget it...for now :D Using a style/class to apply the corners and the center background might fix it but I have to get back to my real job for a while ....

 

In enlarge.js:

/* original
crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x]  </span> </div><img src="'+which+'" onClick="closepreview();">'
*/
crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="15"><img src="images/infobox/corner_left.jpg"></td><td align="center" background="images/infobox/infoboxbgnw.jpg"><span id="closetext" onClick="closepreview()">Close Window [x]  </span></td><td width="15"><img src="images/infobox/corner_right.jpg"></td></tr></table></div><img src="'+which+'" onClick="closepreview();">'

 

In styleheet.css:

#dragbar #closetext{
font-size: 10px;
font-weight: bold;
color: #ffffcc;
text-align: center;
z-index: 999999999999999999;
visibility: visible;
}

Share this post


Link to post
Share on other sites

sweet, I might just have to install your contrib :P

 

Good to know that your popup can handle the pressure, even if you didn't know about the problem/situation, that's what I call forward thinking....

 

 

Have a good day/night, I'm off to bed in a bit, last few things to mangle up gracefully and then signing off...


Riaan

Share this post


Link to post
Share on other sites
sweet, I might just have to install your contrib :P

 

Good to know that your popup can handle the pressure, even if you didn't know about the problem/situation, that's what I call forward thinking....

Have a good day/night, I'm off to bed in a bit, last few things to mangle up gracefully and then signing off...

 

lol.... forward thinking..... mangle up gracefully... too funny!

The main thing that POP-UPs MASSAGEed acheives is that it wont generate page-warnings/pop-up approval notices for users. The extra benefits are that it doesnt care about different size images between products... it handles them all (true I had not tested extremely large images that might cause scrolling) and it definitely will be a standard for honest sites that dont want to POP you with advertising crap (not saying this contrib is a standard, but the principle is fairly good (imho)). :D later

Share this post


Link to post
Share on other sites

UPDATE

 

-- cleaned up extra bracket in stylesheet

-- added notes for STS users (thanks justtech)

-- added "MODs" section to readme with notes on matching infoBoxes and using 3-D (code provided)

-- added notes to script (enlarge.js) with link to forum

+ added commented-out code blocks for centered "close window" text and 3-D top-bar

-- added additional screenshot courtesy of justtech

 

Download/Information Page

Edited by DRIVE

Share this post


Link to post
Share on other sites

While installing this contribution, I decided to take a look at the original script at Dynamic Drive website and found an updated Image Thumbnail viewer script. This updated script turned out to be VERY EASY to install with a simple change in the product_info.php. Below are the steps.

 

BACKUP! BACKUP! BACKUP! --not responsible for your messups

 

Step 1: Download the javascript (thumbnailviewer.js), css (thumbnailviewer.css) and loading image(loading.gif), file from dynamic drive website at http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

 

Step 2: Backup your product_info.php file and reopen the current file

Add to the head section, just below <head>

<script src="thumbnailviewer.js" type="text/javascript"><!----
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/ -->
</script>

 

Step 3: Delete the image popup javascript completely

<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"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</script>

 

Step 4: Below this popup javascript there is a <noscript> section

Add rel="thumbnail" before target="_blank"

Remove <noscript> </noscript> tags

you code should now look like

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES .
$product_info['products_image']) . 'rel="thumbnail" " target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, ' hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

--make sure it is inside the single quote '

--Now there is only 1 link for both javascript and javascript disabled

 

Step 5

Open your stylesheet.css and add everything from thumbnailviewer.css at the very bottom

 

Step 6

Save and upload all 3 files and the image

Alternatively, if you want to put your thumbnailviewer.js in your includes folder just edit step 1 and make it "includes/thumbnailviewer.js" and if you want to put the loading.gif image to images folder just edit the "thumbnailviewer.js" file and change to include the images folder <img src="images/loading.gif" />

 

I tested it with IE6/IE7 and firefox 2, I have 'On the fly' GD ... installed and it works fine on my website. I don't know whats the difference between POP-UPs MASSAGEed V1.4 and this script, I just like this one better.

 

RadioD

Edited by RadioD

Share this post


Link to post
Share on other sites
I don't know whats the difference between POP-UPs MASSAGEed V1.4 and this script, I just like this one better.

 

RadioD

 

I'm very happy to explain the difference to you :rolleyes:

 

What you've posted is a completely separate contribution. It isnt a contribution to the POP-UPs MASSAGEed Contribution. Everything is completely different. This forum thread supports POP-UPs MASSAGEed, not new code forks. The code for the contribution includes all required copyright notices and the license. You might put together your own contribution, offer it in the downloads area for contributions, and start a support thread so you can support it, that way, users wont come here and get confused by having a completely separate contribution inserted in the forum by someone who puts up giant advertisements for other sites when all the requirements have already been met.

 

Just my opinion... you all post whatever you want, its a community forum. If the Contrib or this thread get hijacked I simply wont participate in them any more :thumbsup:

Share this post


Link to post
Share on other sites

and that being his first post and all should get him kicked, dumb@$$...

 

Hows it going James?


Riaan

Share this post


Link to post
Share on other sites
and that being his first post and all should get him kicked, dumb@$$...

 

Hows it going James?

 

Im not going anywhere. I will always be around the forums. I just hate it when a forum gets "hijacked" by people who post completely unrelated code that a contrib is using. It goofs up the thread for people who are looking for help on specific code... anyway, that guy was just a shill for DD. 99% of their scripts are submitted by users anyway so its not like they are some great guru's lol :)

Share this post


Link to post
Share on other sites

A few people have asked about adding the products name into the top-bar of the Layer. Quite easy actually:

 

Replace the script in /[yourshop]/product_info.php (the only change is marked in red so just add that if you're good with code replacements):

<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'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5" id="prodImage"') . '<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"');

}

?>');

//--></script>

 

Around line 30 of /[yourshop]/includes/enlarge.js find these two lines:

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"

 

and add this line below them:

var altquery = document.getElementById("prodImage").alt;

 

Around line 30 of enlarge.js you will see the crossobj.innerHTML that has all the code for the Layer.

replace <span id="closetext" onClick="closepreview()">Close Window [x]  </span>

with this:

<span id="closetext" onClick="closepreview()"> '+altquery+'  </span>

 

For those using 3-D top-bar, it will be something like the below. Note that your images might be different so adjust accordingly:

crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="15"><img src="images/infobox/corner_left.jpg"></td><td align="center" background="images/infobox/infoboxbgnw.jpg"><span id="closetext" onClick="closepreview()"> '+altquery+'  </span></td><td width="15" background="images/infobox/corner_right.jpg"><span id="closetext" onClick="closepreview()">[x]</span></td></tr></table></div><img id="alt" src="'+which+'" onClick="closepreview();">'

 

Also, for the 3-D, I know I assigned two elements to the same ID (closetext). It shouldnt hurt anything in this case although it is not "valid". You could go into the stylesheet and set the [X] to have its own style block. If you dont understand what I mean, dont worry about it :D only the extremely anal code-jockeys will care about it.

Edited by DRIVE

Share this post


Link to post
Share on other sites

RKS Toshiba Qosmio G30

 

Hi James, got it on the site... need to make the text smaller, will do in stylesheet, but it's not displaying the name, double checked the code and all is 100%....

 

 

Thanks bud


Riaan

Share this post


Link to post
Share on other sites

my bad, copied and pasted like my @$$... told you i was good at mangling up my site gracefully.... heheheh

 

 

Working now, showing product name at the top... Only thing now is to get the text smaller to fit into the 3d bar, cause I reckon that's the reason the 3d bars aren't looking right.... cheers man

 

:thumbsup:


Riaan

Share this post


Link to post
Share on other sites
my bad, copied and pasted like my @$$... told you i was good at mangling up my site gracefully.... heheheh

Working now, showing product name at the top... Only thing now is to get the text smaller to fit into the 3d bar, cause I reckon that's the reason the 3d bars aren't looking right.... cheers man

 

:thumbsup:

 

cool bananas :) should be easy to change in the stylesheet. I see you have them set to 12px so resetting to 10px should fix it

 

looking good

Share this post


Link to post
Share on other sites

Hey James, yup, reset it to 10 and it worked a charm...

 

Is there any reason why the span of the background image doesn't cover the first 2 or 3 pixels from the left after the corner_left?


Riaan

Share this post


Link to post
Share on other sites
Hey James, yup, reset it to 10 and it worked a charm...

 

Is there any reason why the span of the background image doesn't cover the first 2 or 3 pixels from the left after the corner_left?

 

Your corner images are only 11px wide so you have to change:

<td width="15"><img src="images/infobox/corner_left.gif"></td>

 

to

 

<td width="11"><img src="images/infobox/corner_left.gif"></td>

 

and do the same with the right corner

Share this post


Link to post
Share on other sites
Hey James, yup, reset it to 10 and it worked a charm...

 

Is there any reason why the span of the background image doesn't cover the first 2 or 3 pixels from the left after the corner_left?

 

Your corner images are only 11px wide so you have to change:

<td width="15"><img src="images/infobox/corner_left.gif"></td>

 

to

 

<td width="11"><img src="images/infobox/corner_left.gif"></td>

 

and do the same with the right corner

 

(in enlarge.js)

 

also, in the stylesheet in the block for #dragbar, change background-color: #704F31;

to background-color: #FFFFFF;

or change the line to this and see what it does:

background: transparent;

Edited by DRIVE

Share this post


Link to post
Share on other sites

sweet, damn you're a good source of info for someone who scares himself with this stuff :D :D :D

 

 

Can I bug you for one more thing?

 

Any chance of making the top bar background dissapear? have the nice 3D images now but showing the background color (standard brown).... Any ideas.... Me changing values from visible to hidden has only hidden the text, and nothing else....

 

Edit: You saw me coming didn't you?

Edited by rkscscc

Riaan

Share this post


Link to post
Share on other sites

works like a charm.... :D Hate the fact that you were reading my mind though :P

 

hehehe, thank you for this great contrib


Riaan

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  

×