Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

lightbox and in description images


Sleeping_beauty

Recommended Posts

ok, here's my issue, for some of my products, I have an additional image I want to display inline with my product description. What I would want to do is have it able to pop up like my default product image.

I have lightbox installed and love it, So basically I;m looking for an easy way to pop up a lightbox of an inline image. Is this possible?

 

here is an example page with an inline image.I would like to make the blue soaps pop up like the pink soaps.

 

TIA and sorry if i sound like I'm repeating the same thing a trillion times, its just one of those days here.

Link to comment
Share on other sites

It can be done.

 

I took the HTML source for your page, modified it to "Lightbox" the second image, saved it on my PC, opened it with IE, and it worked beautifully.

 

Only problem is I don't know how to communicate that "code wise" to you...

:blush:

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Its nice to know it can be done, but I don't know jack about JS. probably something I should learn one of these days. So far I've gotten along with more or less borrowing simple scripts and the such and using other peoples instructions to do what I need.

 

maybe if you could show me the html before and after, i could figure out what you did and just repeat as needed. but if worse came to worse, i could probably just set up my extra images to be just a basic JS pop-up.

Link to comment
Share on other sites

Post the code from your /shop/product_info.php (between CODE tags to preserve formatting).

 

The major problem arises in the fact that no matter what you or I do, part of the code you need to modify will get "butchered" by the forum here, so it won't be a simple "copy/paste" operation.

 

I've done this before, so hopefully I can make you aware of the places the code will get "butchered", and you can adjust accordingly...

;)

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Actually, all I need for you to post is your PHP/javascript code that does the "Click to enlarge" on your product image, and the code you have that does the other image.

 

I'm just going to show you how to adapt the code you already have to do what you want... I hope!

:lol:

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

The codes are the ones I added for lightbox to product_info.php The first block is within the <head> tags and the red is what I actually added.

 

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo $products_name; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<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>
[color="#8B0000"]<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>[/color]

 

 

This is the code I added then lower in the page I added this, some how think this is what we're looking for:

<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" 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>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" 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>'; ?>');
</noscript>

 

I hope this is what you're looking for. If not let me know and I'll try again.

Link to comment
Share on other sites

That's most of it.

 

Now I need the code that does the secondary image you want to get the "lightbox effect" added to.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

ok, now I'm lost lost. My second image is within the product description, inline with the text. would it just be the html snippet:

 

<center><img src="http://www.kaylorskreations.com/shop/images/candles/RosesFoY.jpg" width=107 height=80"></center>

 

or am I missing something again?

Link to comment
Share on other sites

MAKE A BACKUP BEFORE MAKING ANY EDITS!!

 

Replace this code:

 

<center><img src="http://www.kaylorskreations.com/shop/images/candles/RosesFoY.jpg" width=107 height=80"></center>

 

With:

 

<!--
<center><img src="http://www.kaylorskreations.com/shop/images/candles/RosesFoY.jpg" width=107 height=80"></center>
//-->
<center>

<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . 'candles/RosesFoY.jpg') . '" target="_blank" rel="lightbox" title="RosesFoY" >' . tep_image(DIR_WS_IMAGES . 'candles/RosesFoY.jpg', 'RosesFoY', '107', '80', 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . 'candles/RosesFoY.jpg') . '" target="_blank" rel="lightbox" title="RosesFoY" >' . tep_image(DIR_WS_IMAGES . 'candles/RosesFoY.jpg', 'RosesFoY', '107', '80', 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>

</center>

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

I don't see the usual "butchering" on the code the forum usually does, so I think it's a matter of copy/paste!

;)

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Or, if you want to replace your existing HTML with HTML to "lightbox" the blue image, try this:

 

<center>
<script language="javascript"><!--
document.write('<a href="http://www.kaylorskreations.com/shop/images/candles/RosesFoY.jpg" target="_blank" rel="lightbox" title="Glycerin Guest Roses" ><img src="images/candles/RosesFoY.jpg" border="0" alt="Glycerin Guest Roses" title=" Glycerin Guest Roses " width="106" height="80" hspace="5" vspace="5"><br>Click to enlarge</a>');
//--></script>
<noscript>
<a href="http://www.kaylorskreations.com/shop/images/candles/RosesFoY.jpg" target="_blank" rel="lightbox" title="Glycerin Guest Roses" ><img src="images/candles/RosesFoY.jpg" border="0" alt="Glycerin Guest Roses" title=" Glycerin Guest Roses " width="106" height="80" hspace="5" vspace="5"><br>Click to enlarge</a>');
</noscript>
</center>

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Or, if you want to replace your existing HTML with HTML to "lightbox" the blue image, try this:

 

Ohh very snazzy, and works like a champ!

 

Thanks a ton. This should be easy peasy to change and add to any of my other products with other inline images!!

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...