Guest Posted November 7, 2007 Posted November 7, 2007 I've seen a few sites using a system which allows the user to click on the image (to enlarge), it then loads the bigger image in the centre of the screen, and fades out the main site until the user closes the bigger image. Similar to this; http://www.gobaz.com/prodpage.asp?ProdID=7129 Does anyone know where this is available from, or if it can be used with OSC?
shooter-boy Posted November 7, 2007 Posted November 7, 2007 It is relatively straight forward to do, but i don't know of an osC contribution that will do it. Rob Rob Bell - Inspired Graphix Customising osCommerce in Australia, and the world! View my profile for web and email links. I'm sorry, but i cannot offer Free support via PM etc, and osCommerce forums prohibit me from putting any reference to paid support in my signauture. However viewing my profile may provide links to my website or something like that which you may find useful.
star3am Posted November 7, 2007 Posted November 7, 2007 Hi David and Rob, tractormad, thanks for the great Idea :thumbsup: it works and looks really awesome!! http://www.3am.co.za/catalog/trancers-guid...roducts_id/3476 and here's how to do it :lol: 1) go to this url http://gueschla.com/labs/smoothbox/ and download, smoothbox.js and smoothbox.css 2) add the following lines before </head> <script type="text/javascript" src="/path/to/smoothbox.js"></script> <link rel="stylesheet" href="/path/to/smoothbox.css" type="text/css" media="screen" /> 3) in catalog/product_info.php change the following <div> <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?> </div> I just hashed out the javascript popup way good luck! ciao/Riaan www.3am.co.za Psytrance I'm an osCommerce Pimp ..
Guest Posted November 7, 2007 Posted November 7, 2007 Hi David and Rob, tractormad, thanks for the great Idea :thumbsup: it works and looks really awesome!! http://www.3am.co.za/catalog/trancers-guid...roducts_id/3476 and here's how to do it :lol: 1) go to this url http://gueschla.com/labs/smoothbox/ and download, smoothbox.js and smoothbox.css 2) add the following lines before </head> <script type="text/javascript" src="/path/to/smoothbox.js"></script> <link rel="stylesheet" href="/path/to/smoothbox.css" type="text/css" media="screen" /> 3) in catalog/product_info.php change the following <div> <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?> </div> I just hashed out the javascript popup way good luck! ciao/Riaan www.3am.co.za Psytrance That does look awesome! I dont suppose you could tell me where to put those files once I've downloaded them, and where abouts in product_info.php are those edits to be made? Cheers
star3am Posted November 7, 2007 Posted November 7, 2007 Hi Dave, sure, I have a directory for all my javascripts, I suppose you could put yours if you don't have a place for them, in you includes directory, in catalog/includes/configure.php define('DIR_WS_INCLUDES', 'includes/'); and about the product_info.php I have so many contributions and additions that line numbers will no longer match :\ however if you search for something similar to, $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, you'll be very close :) hope that helps! ciao/Riaan www.3am.co.za Psytrance That does look awesome! I dont suppose you could tell me where to put those files once I've downloaded them, and where abouts in product_info.php are those edits to be made? Cheers I'm an osCommerce Pimp ..
digilee Posted November 8, 2007 Posted November 8, 2007 I've been meaning to implement something like this but as a log in box. This post made me turn it into a contrib. :) http://addons.oscommerce.com/info/5529 SolarFrenzy Solar powered gadgets at down to earth prices. CheekyNaughty Promoting British Design
Guest Posted November 8, 2007 Posted November 8, 2007 Hi Dave, sure, I have a directory for all my javascripts, I suppose you could put yours if you don't have a place for them, in you includes directory, in catalog/includes/configure.php define('DIR_WS_INCLUDES', 'includes/'); and about the product_info.php I have so many contributions and additions that line numbers will no longer match :\ however if you search for something similar to, $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, you'll be very close :) hope that helps! ciao/Riaan www.3am.co.za Psytrance OK I've put the two files into my includes folder. I presume when you mentioned inserting code into the HEAD section, its the head section of product_info.php? I found the relevant section of product_info.php and changed it accordingly from; <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); </noscript></td></tr> to; <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); //--></script> <noscript> <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?> </noscript></td></tr> Sorry if Im being lame, but this doesnt seem to have made a difference, its displaying images exactly the same way as it did previously.
star3am Posted November 8, 2007 Posted November 8, 2007 Hi Dave, ok do change your code to this .. <?php /*javascript way <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); </noscript> */ ?> <?php echo '<div><a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a></div>'; ?> and that should do it :) you see you comment out the whole javascript image popup way ... make sense? Cheers, Riaan OK I've put the two files into my includes folder. I presume when you mentioned inserting code into the HEAD section, its the head section of product_info.php? I found the relevant section of product_info.php and changed it accordingly from; <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); </noscript></td></tr> to; <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); //--></script> <noscript> <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?> </noscript></td></tr> Sorry if Im being lame, but this doesnt seem to have made a difference, its displaying images exactly the same way as it did previously. I'm an osCommerce Pimp ..
Guest Posted November 8, 2007 Posted November 8, 2007 Hi Dave, ok do change your code to this .. <?php /*javascript way <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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</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*2, SMALL_IMAGE_HEIGHT*2, 'hspace="5" vspace="5" style="margin-right:13px;"') . '<br>' . '<center>' . TEXT_CLICK_TO_ENLARGE . '</center>' . '</a>'; ?>'); </noscript> */ ?> <?php echo '<div><a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a></div>'; ?> and that should do it :) you see you comment out the whole javascript image popup way ... make sense? Cheers, Riaan Thanks again for your help.... I dont know what the issue is, but I just cant get it to work. As a last resort today (after spending several hours on it), I tried another contrib, called LIGHTBOX. It has very similar install instructions, but I get exactly the same results. The box appears as per normal.... but not in the fancy new popup style window. I've come to the conclusion that putting the script into the <head> section isnt working for some reason. If I delete the JS file altogether, I dont get an error....which kind of makes me thing it isnt even touching it. Ive tried having the.js file in the root, or in the /includes but still no joy. With ANOTHER lightbox contribution it did seem to be making a difference to the image SIZE, so I think the portion which displays the popup is making a difference...but it still wasnt using the JS. Is there any reason anyone can thinkg of why javascript would not be working?
star3am Posted November 8, 2007 Posted November 8, 2007 Hi Dave, don't worry we all know how it feels to stare at code for hours and wonder what the hell :lol: What is your website URL bet I can help you out Cheers, Riaan Thanks again for your help.... I dont know what the issue is, but I just cant get it to work. As a last resort today (after spending several hours on it), I tried another contrib, called LIGHTBOX. It has very similar install instructions, but I get exactly the same results. The box appears as per normal.... but not in the fancy new popup style window. I've come to the conclusion that putting the script into the <head> section isnt working for some reason. If I delete the JS file altogether, I dont get an error....which kind of makes me thing it isnt even touching it. Ive tried having the.js file in the root, or in the /includes but still no joy. With ANOTHER lightbox contribution it did seem to be making a difference to the image SIZE, so I think the portion which displays the popup is making a difference...but it still wasnt using the JS. Is there any reason anyone can thinkg of why javascript would not be working? I'm an osCommerce Pimp ..
Guest Posted November 8, 2007 Posted November 8, 2007 Hi Dave, don't worry we all know how it feels to stare at code for hours and wonder what the hell :lol: What is your website URL bet I can help you out Cheers, Riaan Riaan, Your a star. I've just redone it from scratch using the ProductInfoLightbox contribution. Exactly the same principal....and exactly the same problem, its just displaying in a normal popup window. http://www.oscommerce.com/community/contributions,5185 Regards David.
digilee Posted November 8, 2007 Posted November 8, 2007 have you included the mootools.v1.11.js? <script type="text/javascript" src="/mootools.v1.11.js"></script> SolarFrenzy Solar powered gadgets at down to earth prices. CheekyNaughty Promoting British Design
DejaVu Posted November 8, 2007 Posted November 8, 2007 I wouldnt have used that one. There is one in the contribution section that rules! http://www.huddletogether.com/projects/lightbox2/ It's here - http://addons.oscommerce.com/info/5236 Use the oldest version unless you are using STS!
star3am Posted November 8, 2007 Posted November 8, 2007 cool :) your Website url? Riaan,Your a star. I've just redone it from scratch using the ProductInfoLightbox contribution. Exactly the same principal....and exactly the same problem, its just displaying in a normal popup window. http://www.oscommerce.com/community/contributions,5185 Regards David. I'm an osCommerce Pimp ..
Guest Posted November 8, 2007 Posted November 8, 2007 cool :) your Website url? Ooops sorry http://www.pinkmad.com
Guest Posted November 8, 2007 Posted November 8, 2007 I wouldnt have used that one. There is one in the contribution section that rules! http://www.huddletogether.com/projects/lightbox2/ It's here - http://addons.oscommerce.com/info/5236 Use the oldest version unless you are using STS! That contrib is for STS. However, I've now tried 3 different image popup contribs, and none of them make any difference. Ive come to the conclusiion that the include .js in the <head> section simply isnt having an effect.
star3am Posted November 8, 2007 Posted November 8, 2007 Hi Dave, ok in products_info.php I don't see the following in your <head> section <script type="text/javascript" src="/includes/smoothbox.js"></script> <link rel="stylesheet" href="/includes/smoothbox.css" type="text/css" media="screen" /> also your popup image i see the foillowing code, <script language="javascript"><!-- document.write('<a href="java script:popupWindow(\'http://www.pinkmad.com/push-along-fairy-pi-320.html\')"><img src="product_thumb.php?img=images/Fairy Push Along.JPG&w=82&h=124" width="82" height="124" hspace="5" vspace="5" style="margin-right:13px;" border="0" alt="Push Along Fairy" title="Push Along Fairy"><br><center>Click to enlarge</center></a>'); //--></script> <noscript> <a href="http://www.pinkmad.com/images/Fairy Push Along.JPG" target="_blank"><img src="product_thumb.php?img=images/Fairy Push Along.JPG&w=82&h=124" width="82" height="124" hspace="5" vspace="5" style="margin-right:13px;" border="0" alt="Push Along Fairy" title="Push Along Fairy"><br><center>Click to enlarge</center></a>'); </noscript> instead of seeing the div output, did you put this in products_info.php ? <?php echo '<div><a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" class="smoothbox">' . tep_image(DIR_WS_IMAGES . $product_info['p roducts_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a></div>'; ?> once you have those two things you'll be good to go :) if you still have trouble PM me, and I'll quote you, PM me anyway, cause I found a bug that need fixing :thumbsup: Nice site by the way! ciao Riaan Ooops sorry http://www.pinkmad.com I'm an osCommerce Pimp ..
digilee Posted November 28, 2007 Posted November 28, 2007 SolarSignin wasn't built to work with CRE loaded templates. SolarFrenzy Solar powered gadgets at down to earth prices. CheekyNaughty Promoting British Design
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.