Adding a pop-up image to a column box

[Lobotaman]

I'm really hoping that someone can help me with this one. I need to add 3 links to pop-up images in a new column box I've made. Can somebody please tell me how to do this?

[1] What does the href code look like and which file does it go in?
[2] Where do I put the 3 jpg files?

I can't seem to get this to work and I don't want to add the images to the product catalog.

Thanks to anyone who can help ~ I really appreciate it!

Lobo

[Lobotaman]

When I posted the original post 3 days ago, I had already given this a shot - without any luck.

At this point, I've definitely exhausted my attempts to fix this one. It's totally beyond me. Each of those links in the info boxes has an intricate connection between about three different files.

I can't tell if I'm close or not. So, now, I'm back to the starting point - I have following the instructions from the dox on "Adding a New Box" ~ but I can't get the final part done.

Please take a shot at helping me!

Lobo

[rocky76]

It's not exactly clear what you're asking for. Please expound.

1. Do you have a link to the site so we may see your progress so far?
2. Did you get your box up and running yet?
3. Are you trying to put these three images inside the box or are you trying to make text links to the images?
4. You can post your code.

rocky

[Lobotaman]

I'm hesitant to put the site up there until I get things a bit more secure.

However, here is the clarification you asked for...

The shop will allow customers to customize their purchase with their choice of fonts from a dropdown menu when they add to their cart.

To allow viewing of the fonts, I want an info box in the right column with three of the same links that are used in the "click to enlarge" on the product pages.

But, I don't want these images to be in the product database. I just want the link to pop up a jpeg image from a folder to allow a visitor to see the font selections. (it will take 3 pages to allow for all of the fonts to be viewed).

I hope this helps and I hope you can help me. I have the test box in the right column as per the walkthrough provided at osMAX. But, what next?

[rocky76]

Here's some clarification about oscommerce. You can upload images, anywhere you want to your store, they don't have to be uploaded throught the admin control panel. So think of the info box like a regular HTML page and insert plain old HTML in the PHP file that makes your custom info box.

Example:
1. Upload font_futura.gif to your server anywhere that makes sense to you.
2. Type the correct html in the php file to link to the image... <a href="http://www.yoursite.com/font_futura.gif>Futura Font Example</a>
That will give you a text link that when clicked will show the image in the existing window. If you want to have it open in a new window then you're gonna need some simple popup window javascript.

Hope that gets you jump started.

[bdneuman]

Originally Posted by Lobotaman

When I posted the original post 3 days ago, I had already given this a shot - without any luck.

At this point, I've definitely exhausted my attempts to fix this one. It's totally beyond me. Each of those links in the info boxes has an intricate connection between about three different files.

I can't tell if I'm close or not. So, now, I'm back to the starting point - I have following the instructions from the dox on "Adding a New Box" ~ but I can't get the final part done.

Please take a shot at helping me!

Lobo

Yes, you can just add the link to the image as suggested above. This is what I had done at first, then I switched to a java window. Check out the "Color Chart" under the "Resources" infobox here:

http://www.honeybeadjewelry.com/catalog/index.php

I have all of the required java in my catalog/includes/boxes/resources.php file. Here's the file for reference. Note, the Resources box is not included in stock install - I created it for my shop, but you can add the code to any of the existing infoboxes, too.

Note, you'll need to define your filenames in includes/filenames.php as well.

<?php
/*
  $Id: information.php,v 1.6 2003/02/10 22:31:00 hpdl Exp $
  modified by paulm_nl 2003/12/23
  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/
?>

[color=blue]<!-- popup scripts //-->
<script language="javascript"><!--
function opencolorchart() {
if (!window.msgWindow1) {
	msgWindow1 = window.open('','newWin1','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
      msgWindow1.location.href = 'http://www.honeybeadjewelry.com/catalog/color_chart_popup.htm';
	}
	else {
		if (!msgWindow1.closed) {
		msgWindow1.focus();
		}
		else {
			msgWindow1 = window.open('','newWin1','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
      		msgWindow1.location.href = 'http://www.honeybeadjewelry.com/catalog/color_chart_popup.htm';
		}
	}
}

function openbirthstonechart() {
if (!window.msgWindow2) {
 	msgWindow2 = window.open('','newWin2','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
    	msgWindow2.location.href = 'http://www.honeybeadjewelry.com/catalog/birthstone_colors_popup.htm';
	}
	else {
		if (!msgWindow2.closed) {
		msgWindow2.focus();
		}
		else {
			msgWindow2 = window.open('','newWin2','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
    			msgWindow2.location.href = 'http://www.honeybeadjewelry.com/catalog/birthstone_colors_popup.htm';
		}
	}
}

function openclaspselection() {
if (!window.msgWindow3) {
	msgWindow3 = window.open('','newWin3','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
    	msgWindow3.location.href = 'http://www.honeybeadjewelry.com/catalog/clasp_selection_popup.htm';
	}
	else {
		if (!msgWindow3.closed) {
		msgWindow3.focus();
		}
		else {
			msgWindow3 = window.open('','newWin3','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
    			msgWindow3.location.href = 'http://www.honeybeadjewelry.com/catalog/clasp_selection_popup.htm';
		}
	}
}

//--></script>[/color]

<?php
  $boxHeading = BOX_HEADING_RESOURCES;
  $corner_left = 'rounded';
  $corner_right = 'rounded';
  $box_base_name = 'resources'; // for easy unique box template setup (added BTSv1.2)

  $box_id = $box_base_name . 'Box';  // for CSS styling paulm (editted BTSv1.2)

  $boxContent = '<a href="' . tep_href_link(FILENAME_FAQS) . '"> ' . BOX_RESOURCES_FAQS . '</a><br>' .
		   [color=blue] '<a href="javascript:opencolorchart(\'' . tep_href_link(FILENAME_COLOR_CHART) . '\')">' . BOX_RESOURCES_COLOR_CHART . '</a><br>'.
                '<a href="javascript:openbirthstonechart(\'' . tep_href_link(FILENAME_BIRTHSTONE_CHART) . '\')">' . BOX_RESOURCES_BIRTHSTONE_COLORS . '</a><br>'.
                '<a href="javascript:openclaspselection(\'' . tep_href_link(FILENAME_CLASP_SELECTION) . '\')">' . BOX_RESOURCES_CLASP_SELECTION . '</a><br>'.[/color]                '<a href="' . tep_href_link(FILENAME_LINKS) . '">' . LINKS . '</a><br>';
;

// bof BTSv1.2
  if(file_exists(DIR_WS_BOX_TEMPLATES . $box_base_name . '.tpl.php')) {
  // if exists, load unique box template for this box from templates/boxes/
      require(DIR_WS_BOX_TEMPLATES . $box_base_name . '.tpl.php');
  }
  else {
  // load default box template: templates/boxes/box.tpl.php
      require(DIR_WS_BOX_TEMPLATES . TEMPLATENAME_BOX);
  }
// eof BTSv1.2
?>[color=blue][/color]

The files that are called in the above FILENAME_COLOR_CHART is an html file that looks like this:

color_chart.htm

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function openpopup() {
 msgWindow = window.open('','newWin','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=1,menubar=0,toolbar=0,scrollbars=0');
    msgWindow.location.href = 'http://www.honeybeadjewelry.com/catalog/color_chart_popup.htm';
    self.close();
}
//  End -->
</script>

<TITLE></TITLE>
<meta name="description" content="Whatever words you want">
<meta name="keywords" content="word, word, a phrase or two, word">
<link rel="STYLESHEET" type="text/css" href="stylesheet.css">
</HEAD>
<BODY class=body onLoad=openpopup() scroll=no>

Hope this helps!

[Lobotaman]

It didn't turn out blue, but I can find see where it should have been blue.

This is precisely what I was looking for.

I am assuming you did this in oscMAX (hopefully) and I'll be giving it a try tonight.

Thank you for replying, in fact, thank you VERY much!

I actually did already see your site. I went there looking for something else I found in a thread. (I think it was about adding text to customize something when making a purchase - but I forget.)

Thanks again,

Lobo

[Lobotaman]

I am still working on this and, thus far, have been unable to make it work in Netscape.

Not sure whether or not you know it, but yours will not work in NS7+

I will post something here if/when I find a solution.

John

[bdneuman]

Originally Posted by Lobotaman

I am still working on this and, thus far, have been unable to make it work in Netscape.

Not sure whether or not you know it, but yours will not work in NS7+

I will post something here if/when I find a solution.

John

Thanks for the heads up - I hardly ever check my pages in Netscape like I know I should. I'll look into this tonight and see what I can come up with. Let me know if you do...

[bdneuman]

Originally Posted by Lobotaman

I am still working on this and, thus far, have been unable to make it work in Netscape.

Not sure whether or not you know it, but yours will not work in NS7+

I will post something here if/when I find a solution.

John

Okay, I think I've got it. Here's what I did.

In catalog/includes/resources, I added the resizeTo here like this:

<!-- popup scripts //-->
<script language="javascript"><!--
function opencolorchart() {
if (!window.msgWindow1) {
	msgWindow1 = window.open('','newWin1','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=0,menubar=0,toolbar=0,scrollbars=0');
      msgWindow1.location.href = 'http://www.honeybeadjewelry.com/catalog/color_chart_popup.htm';
	msgWindow1.resizeTo(700,600);
	}
	else {
		if (!msgWindow1.closed) {
		msgWindow1.focus();
						}
		else {
			msgWindow1 = window.open('','newWin1','width=100,height=100,screenX=100,screenY=100,top=100,left=100,resizable=0,menubar=0,toolbar=0,scrollbars=0');
      		msgWindow1.location.href = 'http://www.honeybeadjewelry.com/catalog/color_chart_popup.htm';
			msgWindow1.resizeTo(600,400);
			}
		}
}

Then in color_chart_popup.htm, I removed the script from the head so that all that is left is:

<HTML>
<HEAD>

<TITLE></TITLE>
<meta name="description" content="Whatever words you want">
<meta name="keywords" content="word, word, a phrase or two, word">
<link rel="STYLESHEET" type="text/css" href="stylesheet.css">
</HEAD>

<CENTER>
<TABLE>
    <tr>
	<TD class=main>
	    <IMG SRC=http://www.honeybeadjewelry.com/images/color_chart.jpg>
      </td>
    </tr>
    <tr>
	<td>
	    <CENTER>
	    <form>
	    <input type=button value="Close Window" onClick="javascript:window.close();">
	    </form>
	    </CENTER>
      </td>
    </tr>
</table>
</CENTER>

Works in IE and Netscape.