Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Lightview - javascript image viewer


Guest

Recommended Posts

Hi

 

I have used Lightview as an image viewer on a store. which is on Oscommerce 2.2 - you can add this using

 

BEFORE YOU DO ANYTHING BACKUP

 

I do not take credit for any of the following code. Lightview is provided by http://www.nickstakenburg.com and the contribution chnges are exactly the same as one made for lightbox.

 

 

1. You will need to down load lightview - visit http://www.nickstakenburg.com/projects/lightview/

I used version 2.0.0_rc6

-> you will also need to download prototype.js http://www.prototypejs.org/ & scriptaculous.js http://script.aculo.us/downloads

 

 

2. put your javasript files in a folder 'includes/javascript/'

 

note:// at the time of writing in scriptaculous after unzipping you are presented with 3 folders. The README will give you instructions as to which files you'll need fot set up.

 

-> upload these files to your server.

 

3. 2. Copy the info from /css/lightview.css to stylesheet.css

 

-> upload

 

 

4. Open product_info.php

 

 

> FIND

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

REPLACE WITH

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

> Place somewhere in the <HEAD> tags

 

<script type="text/javascript" src="includes/javasript/prototype.js"></script>

<script type="text/javascript" src="includes/javasript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="includes/javasript/lightview.js"></script>

 

 

 

>. Take away the old popupscript in /catalog/product_info.php

 

FIND AND REMOVE

 

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

 

 

FIND & REMOVE

 

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

 

 

//

 

the next change depending on what mods you have installed is normally made in the code below what you have deleted - inbetween the <noscript> tags.

inshort your looking to add ' class="lightview" ' to the image link - the tep_href_link image in the 'a href' will relpace the other image. I have only tested this with ULTRA PICS ( http://addons.oscommerce.com/info/1642 ) installed.

 

 

 

at line 108

 

 

FIND

 

<?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>'; ?>

 

 

and replace with

 

'<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" class="lightview" title="'.$product_info['products_name'].'" >' . 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>';

 

 

OR if like me you have ULTRA PICS add on installed

 

<?php

if ($product_info['products_image_lrg']) {

echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_lrg']) . '" target="_blank" class="lightview" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image_med'], $product_info['products_name'], MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>';

}

else {

echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_med']) . '" target="_blank" class="lightview" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image_med'], $product_info['products_name'], MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>';

}

?>

 

Hope that works for you.

 

 

but am trying to install it on RSC 2a and am having no luck. Don't suppose anyone would know what the differences might be.

Link to comment
Share on other sites

i have this resolved now. just a prob with not loading folders to the same place.

 

changed write up will appear on my contribs.

 

Could the maintainer please include the lightview and other files to use in this package.

 

And a jpeg of finished add on.

 

I say this as an instalation makes no difference to a vanilla MS2 install.

Link to comment
Share on other sites

Hi

 

I have tried this over and over again thinking I was doing something wrong, but the furthest I get is when I click on the image, the lightbox opens and sits waiting and dims the background, but never loads an image. I have followed it to the letter. Is there something missing from the contrib files?

Edited by fonedoc
Link to comment
Share on other sites

Hi

 

I have tried this over and over again thinking I was doing something wrong, but the furthest I get is when I click on the image, the lightbox opens and sits waiting and dims the background, but never loads an image. I have followed it to the letter. Is there something missing from the contrib files?

 

 

did you try the new files?

 

http://addons.oscommerce.com/info/5776

Link to comment
Share on other sites

  • 1 month later...
  • 11 months later...

NEVER MIND GO IT WORKING.. HAD FOLDER IN WRONG LOCATION AND OSC WAS GETTING CONFUSED IN TWO CSS FILES.. COPIED ALL LIGHTBOX.CSS INTO STYLESHEET.CSS IT WORKS JUST GREAT. THANK YOU NICE CONTRIB..

 

IT KEEPS ON IPENING IN NEW WINDOW :( NEED HELP
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...