Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Display a large image without using a pop-up


kahml

Recommended Posts

Tired of pop-up windows? Want to see your full-sized image appear in its own page? Well, then this tip is for you!

 

Most of these instructions are similar to the KB article Add Box Pages so there shouldn?t be too many surprises about what you have to do. There?s just some additional customization required in catalog/product_info.php to let you use a full page rather than a pop-up

 

There are three parts to this procedure.

 

1. Create a new catalog/product_image.php page

2. Customize catalog/product_info.php to display the large image page

3. Test your changes

 

Important note: As with any other form of customization in osCommerce, please make sure you create back-up copies of any files that you change before you begin.

 

Now, let?s get to it.

 

Start by copying the two files in osCommerce that have the least amount of extraneous code:

 

catalog/shipping.php

catalog/includes/languages/english/shipping.php

 

Rename each file to product_image.php in the corresponding folder.

 

Now, edit catalog/product_image.php.

 

Change the comment on line 3 to reflect the new file name.

 

Then, change the FILENAME_SHIPPING variable to FILENAME_PRODUCT_IMAGE in two locations at the top of the file.

 

Next, find the following lines of code:

 

          <tr>
           <td class="main"><?php echo TEXT_INFORMATION; ?></td>
         </tr>

Add the following code after those lines:

 

	<tr>
 <td class="main"><center><br>
 <?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], 'Image of ' . $products['products_name'] . ' provided by ' . STORE_NAME); ?></center></td>
</tr>

Next, find the following lines of code:

 

              <tr>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
               <td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
             </tr>

Change the middle <td> tag to the following:

 

                <td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params()) . '">' . tep_image_button('button_back.gif', IMAGE_BUTTON_BACK) . '</a>'; ?></td>

Optional step: Depending on the actual size of your large image, you may want (or need) to remove the right-hand column from the display. To do so, scroll to the bottom of the file and simply comment it out:

 

<!-- right_navigation //-->
<?php // require(DIR_WS_INCLUDES . 'column_right.php'); ?>

We are almost done. Scroll back up to the top of the file.

 

Open another window and edit catalog/popup_image.php.

 

Select and copy the line of code that begins with $products_query.

 

End the edit session of catalog/popup_image.php and close the window.

 

At the top of catalog/product_image.php, paste the line of code immediately after the $breadcrumb statement.

 

Make one change to the pasted code: the last instance of pID should now read products_id.

 

Your first few lines should now look like this:

 

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_IMAGE);

 $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRODUCT_IMAGE));

 $products_query = tep_db_query("select pd.products_name, p.products_image from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.language_id = '" . (int)$languages_id . "'");

Save your changes and end the edit session.

 

Edit catalog/includes/languages/english/product_image.php.

 

Change the comment on line 3 to reflect the new file name.

 

Change the definitions to look like the following:

 

define('NAVBAR_TITLE', 'Full Size Image');
define('HEADING_TITLE', 'Full Size Image');

define('TEXT_INFORMATION', '');

Note: If you want to display some text on top of the image, fill in whatever you want displayed.

 

Save your changes and end the edit session.

 

Edit catalog/includes/filenames.php.

 

Scroll to the very bottom of the file and add a new definition. It should look like this:

 

  define('FILENAME_PRODUCT_IMAGE', 'product_image.php');

Save your changes and end the edit session.

 

Now comes the fun part, updating product_info.php to use this new page.

 

Edit catalog/product_info.php.

 

Starting at the top of the file, look for the following code:

 

<script language="javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}
//--></script>

You can safely delete this because we will no longer be using a pop-up window.

 

Next, look for the following code:

 

<script language="javascript"><!--
document.write('<?php echo '<a href="javascript: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>

This is really two versions of the same thing; one supports browsers that run JavaScript, the other for ones that don?t.

 

Replace all of it with the following code:

 

<?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_IMAGE, tep_get_all_get_params()) . '">' . 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>'; ?>

Because we are no longer concerned with a pop-up we no longer need two different versions.

 

Save your changes and end the edit session.

 

Now it is time to test your changes.

 

Open up your browser to your store?s home page and search for or display a product.

 

Click on the link to open the product_info.php page.

 

Click on the image to display the large image.

 

If necessary, scroll down and click the Back button to return to the product_info.php page.

 

That?s it!

 

Larry

 

 

Advanced notes for those who use the Small, Med, Large Image contribution.

 

If you don?t have a large image to display, then you certainly don?t want to have someone click to enlarge it. The following code lets you display the note under the image based on whether the large image physically exists:

 

<?php
if (file_exists(DIR_WS_IMAGES . $product_info[?products_largeimage?])) {
echo '<a href="' . tep_href_link(FILENAME_PRODUCT_IMAGE, tep_get_all_get_params()) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_mediumimage'], addslashes($product_info['products_name']), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>';
} else {
echo tep_image(DIR_WS_IMAGES . $product_info['products_mediumimage'], $product_info['products_name'], MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>';
}
?>

Link to comment
Share on other sites

I wanted to do something similar: On the product_info.php page I wanted to replace the small image and "Click to enlarge" link, with the large image. Since my site is photo oriented this saves the customer a step in not having to click the link to get the large picture. For most sites this won't be a concern since the image isn't really the selling point, the description is. But for my site the image IS the selling point since it's the product.

 

To do this, edit product_info.php and find this code:

 

<script language="javascript">
 <!--
 document.write('<?php echo '<a href="javascript: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>

 

And replace it with this:

 

<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']); ?>

Link to comment
Share on other sites

  • 2 months later...
I wanted to do something similar:  On the product_info.php page I wanted to replace the small image and "Click to enlarge" link, with the large image.  Since my site is photo oriented this saves the customer a step in not having to click the link to get the large picture.  For most sites this won't be a concern since the image isn't really the selling point, the description is.  But for my site the image IS the selling point since it's the product.

 

To do this, edit product_info.php and find this code:

 

<script language="javascript">
?<!--
?document.write('<?php echo '<a href="javascript: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>

 

And replace it with this:

             

<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']); ?>

 

 

 

thanks for that - it was really givingme a headache trying to work it out!! I needed to stop the pop up images :thumbsup:

Upon receiving fixes and advice, too many people don't bother to post updates informing the forum of how it went. Until of course they need help again on other issues and they come running back!

 

Why receive the information you require in good faith for free, only to then have the attitude to ignore the people who gave it to you?

 

There's no harm in saying, 'Thanks, it worked'. On the contrary, it creates a better atmosphere.

 

CHOOCH

Link to comment
Share on other sites

  • 2 weeks later...

My website is also photo oriented. Also heavily modified but I would like to get rid of the javascript. I would appreicate if anyone could help. I have extra images and would like the new window to also include the extra images. Any ideas?

 

thanks for that -  it was really givingme a headache trying to work it out!! I needed to stop the pop up images  :thumbsup:

Link to comment
Share on other sites

I wanted to do something similar:  On the product_info.php page I wanted to replace the small image and "Click to enlarge" link, with the large image.  Since my site is photo oriented this saves the customer a step in not having to click the link to get the large picture.  For most sites this won't be a concern since the image isn't really the selling point, the description is.  But for my site the image IS the selling point since it's the product.

 

To do this, edit product_info.php and find this code:

 

CODE

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

 

 

And replace it with this:

           

CODE

<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']); ?>

 

I tried this but my image just disappeared, no image shown.

 

Any ideas why not?

 

Thanks

 

Mark

Lifes a bitch, then you marry one, then you die!

Link to comment
Share on other sites

Check this out :

 

can you tell its still osC

 

Hover the mouse on the image.

 

FYI, Do you know your getting this at the bottom of your pages?

 

Page time : 58.062 ms, 11.966 ms in SQL

 

# ms rows block query

0 1.356 202 applicationtop2header select configuration_key as cfgKey, configuration_value as cfgValue from configuration

1 0.491 1 applicationtop2header select value from sessions where sesskey = '59012433cefdc1b9eccdffed1cd2896a' and expiry > '1107986541'

2 0.365 1 applicationtop2header select code, title, symbol_left, symbol_right, decimal_point, thousands_point, decimal_places, value from currencies

3 0.539 1 applicationtop2header select 1 from whos_online where session_id = '59012433cefdc1b9eccdffed1cd2896a' LIMIT 1

****************************************************

The way of life, and the way we work for you.

Link to comment
Share on other sites

FYI, Do you know your getting this at the bottom of your pages?

 

LOL, I know, it's a development site, hence the query log and all.

Did the image mouseover work for you ?

Link to comment
Share on other sites

Was not sure you knew....was not sure you were live or not :)..

 

Yes, worked good, I like that idea, may use it as I also hate popup's...

 

 

 

LOL, I know, it's a development site, hence the query log and all.

Did the image mouseover work for you ?

The way of life, and the way we work for you.

Link to comment
Share on other sites

Well, it's Javascript so you could steal it without even asking, I'm grateful that you ask.

 

Read the source of the product info page. See that JavaScript file ?

 

Open it. It's at the beginning. It's just a page of code really.

 

You'll have to code in your app some HTML-Writing of a <div> with a special id. Look in my generated HTML to find it, it's just a bunch of tags.

 

The rest of the JS will be useless to you (it talks to my custom products options).

 

Also I use thumbnails. So there is a small image and a large image. When the mouse is hovered over the small image, it starts to zoom it and at the same time triggers the loading of the large one in the background. So, the image zooms and looks a little blocky, but if the guy has DSL, the image is loaded quickly, before it has reached full zoom, and then the JS puts the big image instead of the small one, and noone notices it was zooming the lo-rez image while loading the hi-rez image in the backgound. This means, don't set the zoom speed too high or the image switch will be too obvious !

 

The default osC installation, being the ***** that it is, does not use thumbnails. You probably have installed a thumbnails contrib though, so make it so the right things point to the right places. Most notably, the image sizes (and thumb sizes) must of course be right in the <img> tags (else it's impossible to calculate a zoom ratio) and also the two images must have the same aspect ratio.

 

My code is not free, to use it you have to do something for me : test it on as many browsers and platforms as you can and report to me any problems or fixes if you find some. That way everyone will be happy !

 

 

 

---

 

Meanwhile, my 50k products test site is down to sub-50 ms page times without the category box. I have to find a way to integrate this damn thing now. I'm thinking about an iframe and a javascript tree-control... hum.

Link to comment
Share on other sites

I wanted to look at your page but so far I have had no luck with that link. I will keep trying.

 

Does anyone know how to have an image that rotates as in a picture of a piece of jewellery and you can turn it around? I have no idea what I am talking about techncially. Is this really a movie or coudl I have a four sided shot of the item?

Link to comment
Share on other sites

I found some on another site (I know I am talking to myself:)

 

<script>

//This and others free scripts you can find on a site: artdhtml.com

 

ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? 1 : 0;

ie4=(document.all && !document.getElementById)? 1 : 0;

ie5=(document.getElementById && document.all)? 1 : 0;

ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? 1: 0;

w3c=(document.getElementById)? 1 : 0;

 

wid=(ie4||ie5)?window.document.body.clientWidth-20:window.innerWidth-36

 

if(ns4){document.write ('<layer name="di1"></layer>')}else{document.write ('<div id="di1" style="position:absolute;z-index:100" ></div>')}

 

outd=""

 

if(w3c)div1=document.getElementById('di1')

if(ie4)div1=document.all['di1']

if(ns4)div1=document.layers['di1']

 

function move_div(x,y){

if (isNaN(x+y))return

if(ns4){div1.moveTo(x,y)}else{div1.style.left=x+'px';div1.style.top=y+'px';}

}

 

function write_div(text){

if(ns4){

div1.document.open();

div1.document.write(text);

div1.document.close();

}

else {div1.innerHTML=text;}

}

 

function big(n){

ondiv=n

write_div("<a href=java script:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>");

move_div(x,y)

}

 

function big_hide(){

ondiv=0;

t3=window.setTimeout('big_hide2()',100)

}

 

function big_hide2(){

if (ondiv==0){

write_div("");

move_div(-1000,-1000)}

}

 

y=x=0

function dragIt(evt){if(ie4||ie5){x=window.event.clientX+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}else {x=evt.pageX ; y=evt.pageY }}

 

document.onmousemove = dragIt

if(ns4){document.captureEvents( Event.MOUSEMOVE )}

 

 

</script>

Link to comment
Share on other sites

  • 4 weeks later...

I simply love that!!!!

My site is also photo oriented (selling graphics, only downloads), so I would be really interested in something like that!

Are you sharing?

 

Elaine

 

Check this out :

 

can you tell its still osC

 

Hover the mouse on the image.

"There are only 10 types of people in this world: those who understand binary, and those who don't. "

Link to comment
Share on other sites

thanks, I will certainly try, have not done this before though.

thanks again,

 

Elaine

 

Go ahead, take the javascript... I trust you'll figure how to make the thing work ?

"There are only 10 types of people in this world: those who understand binary, and those who don't. "

Link to comment
Share on other sites

  • 3 months later...

bluehorselogo.gif

 

<_<

I am very new to Oscommerce and php. Never one to run from a challenge, I jumped in headfirst. I am working on 2 sites at the moment. www.ponybluepress.com/buyebooks and www.ponybluepress.com/sewandso.

 

With that said I am having extreme problems with thumbnails and larger images. If they are not all smooshed up they are huge or blurry. I've worked on a couple solutions per forum suggestions. The best I got was half of what I needed.

 

I am currently trying Larry Kahm's "Display a large image without using a pop-up, No need for JavaScript " on my www.ponybluepress.com/sewandso site.

 

Wonder of wonders I can't see where I went wrong. I followed each step carefully. When I click on the enlarge image link I have no image. And the initial image (maiden) is still smooshed. I need helllllp. is there anyone out there who can offer a hand if not with Larry Kahm's solution. (which I really like his thoery) Then maybe with another solution.

Link to comment
Share on other sites

bluehorselogo.gif

 

:'(

 

Sorry it took me so long to get back. Where do you adjust the size for the images without effecting the code for the page. I still don't know what to do about the image not showing up on the "Click for larger image page."

 

Thanks for any help you can give in advance.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...