Javascript popup help for product pics in tabs

[acharme]

I am using Products Tabs, and I would like to use the oscommerce popup feature but put it into the description tab. Here is what I have right now

I did it with css and it does not give me the popup - it goes to a new page - and it is not dynamic on tracking the pictures.

Can anyone give me a hand here with what code should I move and where?

[Guest]

css will work if you do it properly and you do not need jscripts. Utilize the cascading elements behavior and you can popup pretty much anything you like without jscripts.

[acharme]

but if I do it with css, don't I have to hard code every picture?

[Guest]

no you don't. Why you have to hard-code every picture? You won't set the products image as a background for a css class you will use the css cascading elements to popup the window or list or whatever you want.

 

here you get an idea what I am talking about:

http://www.cssplay.co.uk/menu/lightbox.html

 

Although these examples have issues with different browsers you can achieve the same effects with straight table elements and regular php code within the popups. No active scripting and multiple nested popups.

[acharme]

I have a css class assigned, the problem that I am having is finding the correct call for the images, and the correct place to put it. Using product tabs, I think that I need to put it into catalog/includes/modules/product_tabs.php in the section:

 

<table class="tabline" cellpadding="0" cellspacing="0" align="left" width="100%">

<tr>

<td>

<ul id="mainnav1">

<li><a href="#DESC">

<?PHP ECHO TEXT_TAB_DESCRIPTION; ?></a></li>

<?php

if ($product_info['products_spec'] > '') {

?>

<li><a href="#SPEC"><?PHP ECHO TEXT_TAB_SPEC;

?></a></li>

<?php }

?>

 

Am I completely missing your point? I can set a css popup, but I can't seem to locate the correct call for the image, and the place to put the call.

[Guest]

ok I see you just want the picture in the description be a popup, but where is the code for the image you currently have? Tha code is the one you need to change either using css or jscript. If you need to click the image then you will need jscript. If you want to use the rollover then you can do it either way.

 

But I do not see the image code. I would expect something like this in a simplistic form:

 

<li>
<?php
echo TEXT_TAB_DESCRIPTION;
?>
<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>
</li>

[acharme]

That is precisely my problem :thumbsup: ! I don't know what code to put in there to call the images. I will give your snippet a try.

[Guest]

perhaps the image is within the product description itself.

[acharme]

Yes, I had set

<div class="productthumbnail">

<a href="images/CLA_product_lrg.jpg"><IMG STYLE="border:none;" width="100" height="100" SRC="http://gemanje.com/shop/images/CLA_product_med.jpg" ALT="The Classic Bracelet Kit" ></a></br>The Classic Bracelet Kit</div>

 

in the admin description of the product as it was the only way that I could get the darn thing to show up halfway right.

 

I have put your snippet into the modules/product_tabs.php, and I am working with it now. If you have any advice on how to make this work properly, I am all ears.

[Guest]

well you could simply copy the code from the product_info.php

 

and place it instead of the description.

 

<?php
if (tep_not_null($product_info['products_image'])) {
?>
	  <table border="0" cellspacing="0" cellpadding="2" align="left">
		<tr>
		  <td align="center" class="smallText">
<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>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" 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>'; ?>
</noscript>
		  </td>
		</tr>
	  </table>
<?php
}
?>
	  <p><?php echo stripslashes($product_info['products_description']); ?></p>

 

this is from the default osc product_info.php

[acharme]

I have tried all kinds of variations on this theme, but it does some really strange things to the product tabs. I have it in there right now working on this

I am just blind to what I am doing wrong

[Guest]

Yes I see. The tabs are working with the <div><a> elements, But after the first <a> tag you cannot add a 2nd one directly without closing the first one or without using anoter block element. This is where the css example I posted earlier could help.

 

You need the code being surrounded by this

 

<li><a href="#DESC">

 

Put your code here.

 

</a></li>

 

because the href is what the tabs are relying one so has to stay as is. And again you may need to check with multiple browsers

[acharme]

Boy, do I have it messed up now :blink:

this is what I have in modules/product_tabs.php:

 

<li><a href="#DESC">

<div class="productthumbnail">

<?php

if (tep_not_null($product_info['products_image'])) {

?>

<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>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" 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>'; ?>

</noscript></div>

 

<?php

}

?>

<p><?php echo stripslashes($product_info['products_description']); ?></p>

<div class="productdescription">

<?php

echo TEXT_TAB_DESCRIPTION;

?></div>

</a></li>

 

I need a dinner break, thankyou so much for all of your help. At least now I feel like I might be getting somewhere.

[acharme]

Yeah! I have made major strides! See Me Making Major Strides

Now, I am trying to get the picture to show up as 'medium' sized (150px square). I have tried MEDIUM_IMAGE_WIDTH, and I have tried a variety of div id and class - give me a clue?

I am also trying to get the description to float right. (pic on the left, desc on the right)

This is the code I have to get what I got :D

		  <div id="DESC" class="tabcontent">
			  <b><?php echo TEXT_TAB_DH; ?></b></br>
	  <div style="font-size: 12px;font-weight: bold; 
		border-top: 1px dashed #344958;">

<?php
if (tep_not_null($product_info['products_image'])) {
?>
<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>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" 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>'; ?>
</noscript>
<?php } 
?></br>
		  <?php echo
		stripslashes($product_info['products_description']);
		?>
	  </div></div>

Meanwhile, I will continue to mess around with anything that I can think of...

[Guest]

yes in fact I do not know why the tabs module would use the href for the tabs selection instead of the div. Especially when they use jscripts.

 

Your problem now is the products image does not popup in the description tab because it has the link infront of the jscript. I am not sure why it could be the noscript part that is surrounded by a div. When you point the mouse over the image you should only see the jscript stuff and not a link infront of it.

[acharme]

So perhaps I should be looking at a different tabs contribution? Do you have any experience with any offered?

I have this now:

		<div id="DESC" class="tabcontent">
				 <div style="font-size: 12px;font-weight: bold; 
		 border-bottom: 1px dashed #344958;"> 
				<b><?php echo TEXT_TAB_DH; ?></b></div></br>
<div style="productthumbnail">				   
<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"') . '
' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script></div>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" 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"') . '
' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>
</br>
		   <?php echo
		 stripslashes($product_info['products_description']);
		 ?>
	   </div>

and it still does not pop up

[Guest]

what is this text here:

TEXT_TAB_DH

what it contains? I am trying to figure out where the link infront of the jscript comes from.

[acharme]

that's the part that gets the 'Product Details' line on the Desc tab, the 'Product Specifications' line on the Specs tab, etc.

[Guest]

there is a bug with the forum posts. javascript should be one word. (no spaces in-between) the forum splits it into 2 different words within the code quotes. I checked the source html and there is a space in-between. Can you take it out?

[acharme]

that was so simple! The popup works beautifully now! I cannot thank you enough for the time you put into this. I will definitely add this to my list of things to watch for.

Got any ideas on how to make the description text float just to the right of the pic?

[Guest]

remove the line break

</br>

 

just below the </noscript> line and try it.

[acharme]

Nope.

Negative margins mess everything up.

I can't get a div to work.

And I can't use a different style for td or tr or it messes everything up.

What is it with this thing?

 

Can I change 'SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,' to MEDUIM (or something)? I need the product image to be 150px, but if I change the size of 'small' in admin it changes the size of all 'small' pics, which I would prefer not to do.