OSCOMMERCE SUPPORT CALL 702-453-3332
 

Help - Search - Members - Calendar
Full Version: CSS IMAGE POP-UP - Apply to Product_Listing
osCommerce Community Support Forums > osCommerce Online Merchant v2.x > Installation and Configuration
pocketGEAR.ca
Jul 14 2006, 03:22 AM
QUOTE (Mother @ Jun 11 2006, 11:17 PM) *
********************
JUNE 11/2006

CSS POP_UP ALA STU NICHOLS @ www.cssplay.co.uk

SEE THE ORIGINAL HERE: http://www.cssplay.co.uk/menu/magnify.html

MODIFIED TO WORK WITH OSC MS2.2 BY MUSKOKEE

******************
Link to Contribution: http://www.oscommerce.com/community/contributions,4313


Well, I tried to get this contribution working on my includes/modules/product_listing.php. I had set the images to 100x100, and thought it'd look nice to just scroll the mouse down. (click here for my site)

Anyways, this is the joke of code changes I came up with:
CODE
            break;
          case 'PRODUCT_LIST_WEIGHT':
            $lc_align = 'right';
            $lc_text = ' ' . $listing['products_weight'] . ' ';
            break;
          case 'PRODUCT_LIST_IMAGE':
            $lc_align = 'center';
           if (isset($HTTP_GET_VARS['manufacturers_id'])) {
                     
              $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], (SMALL_IMAGE_WIDTH * (((100 - IMAGE_PRODUCT_LISTING_PERCENTAGE)/100))) , (SMALL_IMAGE_HEIGHT * (((100 - IMAGE_PRODUCT_LISTING_PERCENTAGE)/100))) ) . '</a>';
            } else {
      
   $lc_text =
print("<div id=\"menu\">");        
echo '<a class="p1" href="'. $_SERVER['REQUEST_URI'].'#LRG">'. tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], (SMALL_IMAGE_WIDTH * (((100 - IMAGE_PRODUCT_LISTING_PERCENTAGE)/100))) , (SMALL_IMAGE_HEIGHT * (((100 - IMAGE_PRODUCT_LISTING_PERCENTAGE)/100)))) . tep_image_large(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] ).'</a>';?>

</div>
      
<?php
            }
            break;
          case 'PRODUCT_LIST_BUY_NOW':


so, i got the box in, but i'm stuck where it says $lc_text=... i couldn't find a way to get the html "div id=menu".. and.. yeah, i really don't know what i'm doing, and that kids, is about 6 hours <grin>.

Anyways, if anyone else out there thinks this might benefit them as well, that'd be great if you wanted to pick up the reins.

As a side note, i wanted to get rid of the "hover over" to enlarge box image - nice and clean.

tim.
pocketGEAR.ca
muskokee
Jul 14 2006, 03:51 AM
Hi Tim,
If you loose the "hover" gif you loose the link from the image to the product. The hover image takes care of allowing the pop-up while still maintaining the link to the product. If you don't mind loosing the link then inserting the pop-up directly through the listing image is no problem.

Sheri
BTW, the hover gif was only an example! I didn't expect anyone to use it tongue.gif


QUOTE (pocketGEAR.ca @ Jul 13 2006, 11:22 PM) *
Well, I tried to get this contribution working on my includes/modules/product_listing.php. I had set the images to 100x100, and thought it'd look nice to just scroll the mouse down.
As a side note, i wanted to get rid of the "hover over" to enlarge box image - nice and clean.
tim.
pocketGEAR.ca
Jul 14 2006, 04:16 AM
QUOTE (muskokee @ Jul 13 2006, 11:51 PM) *
Hi Tim,
If you loose the "hover" gif you loose the link from the image to the product. The hover image takes care of allowing the pop-up while still maintaining the link to the product. If you don't mind loosing the link then inserting the pop-up directly through the listing image is no problem.


Hi Sherri,

Thanks, I figured the hover logo out after a while, but you made it a bit more clear for me. On one hand I'm impressed at what i've been able to do without any php or coding experience, but on the other i get so frusterated because i'm basically copy/pasting, that type of stuff! (You've all been there! <grin>). Ah well, I'm learning, and this kind of stuff is the best to learn on.

However, I don't know if I can make clear where I'm stuck now. I have the link removed, but the product images are showing up above the table. (All squished together - hover WORKS!).

The reason they are squished, is I can't find away to insert the <div id="menu"> funtion to sort em out all pretty:

CODE
$lc_text =
?> <div id="menu?> ?>php        <-- I THINK IT GOES HERE?
echo '<a class="p1" href="'. $_SERVER['REQUEST_URI'].'#LRG">'. tep_image(DIR_WS_IMAGES .


Again, I don't have much experience, and I may be setting this up completely wrong, but that's the place i have marked for it, and I can't get that html code in the php without getting an error. I've tried <print> php commands, require (TEXT_DESC..., etc etc!)

Any other hint for me? I'm puzzled! blink.gif
muskokee
Jul 14 2006, 04:33 AM
Try this (untested) tell me if you get any errors

CODE
case 'PRODUCT_LIST_IMAGE':
            $lc_align = 'center';
            if (isset($HTTP_GET_VARS['manufacturers_id'])) {
              $lc_text = '<div id="menu"><a class="p1" href="' . $_SERVER['REQUEST_URI'].'#LRG">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . tep_image_large(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] ).'</a></div>';
            } else {
              $lc_text = '&nbsp;<div id="menu"><a class="p1" href="' . $_SERVER['REQUEST_URI'].'#LRG">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . tep_image_large(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] ).'</a></div>&nbsp;';
            }
            break;




QUOTE (pocketGEAR.ca @ Jul 14 2006, 12:16 AM) *
Any other hint for me? I'm puzzled! blink.gif
artico
Feb 8 2007, 09:27 AM
Hi muskokee

Thanx for this script !

pocketGEAR.ca Thanks for embedding it into the Product_Listing page

Here is my solution for the link prob

CODE
case 'PRODUCT_LIST_IMAGE':
            $lc_align = 'center';
            if (isset($HTTP_GET_VARS['manufacturers_id'])) {
              $lc_text = '<div id="menu"><a class="p1" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . $_SERVER['REQUEST_URI'].'#LRG">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . tep_image_large(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] ).'</a></div>';
            } else {
              $lc_text = ' <div id="menu"><a class="p1" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . $_SERVER['REQUEST_URI'].'#LRG">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . tep_image_large(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] ).'</a></div> ';
            }
            break;


Now you can click on the image and get to the product page biggrin.gif

I just had one prob: it don't leave spaces between the products in Firefox (mayB cause I'm using "product listing columns_2_2" (not sure))

if anyone have any solution it will B tongue.gif GREAT tongue.gif

BTW pocketGEAR.ca how did you make the popup to show on a position relative to its image ?

TNX again
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.