Lightbox to enlarge extended info image?

[offtherockcycle]

Hello,

I am using the extended info page for our bikes, where a single bike is listed, with a medium size image and all its specifications.
From there, I would like to be able to enlarge the image using Lightbox.

So this is slightly different from Drillpine's example, but just like here:
http://www.uktactical.com/acatalog/B...Knee_Pads.html

I have followed the previous posts on the matter, particularly "Simple Lightbox Integration", but stumble on how to finish the project.

So far, I have added the lightbox javascripts and css in the main layout, and put all the Lightbox javascript files and images directly in the site 1 folder, as explained. (I've also made sure that "builder" is added in the javascript code, as explained).

I have tried to call the lightbox function by adding a link to the Standard Extended Image layout, in Design | Library:

<a rel="lightbox" href="<Actinic:Variable Name="ExtendedInfoImage"/ >" />
<img src="<Actinic:Variable Name="ExtendedInfoImage"/>"
width="<Actinic:Variable Name="ExtendedInfoImageWidth"/>"
height="<Actinic:Variable Name="ExtendedInfoImageHeight"/>"
alt="<actinic:variable name="ProductName" encoding="strip" />"
/>

</a>

But although I get a cursor on the image, nothing else happens.

I'm a bit stuck as to where to go from here.
I was wondering if there was further information anywhere that I'd missed, as I know it takes time to reply to individual posts.

Thank you for reading,

Joelle

[NormanRouxel]

Welcome to the Community, Joelle.

As always, an URL would help a lot.

P.S. Not sure that you're going to end up with what you want. You're code above is going to have an Extended Info Image that when clicked opens up a lightbox showing exactly the same image. Why bother?

[offtherockcycle]

Thank you for your welcome and fast reply.

I have put a test site up, and the page I'm talking about is here:
http://roughideas.co.uk/otr/acatalog/info_2.html

I'm aware this code isn't right for a larger image, but I put it there to see first of all if I could open Lightbox at all. Then I'd have to work out how to open a larger image in Lightbox - but I'm no programer, so I was hoping the answer was already written somewhere on this site....!

[NormanRouxel]

Scriptaculous is trying to load effects.js and builder.js and you've not provided these files. Put them in your Site folder and upload them via Design / Additional Files.

Or use a jQuery based Lightbox (like my Lightbox add-on does). I use Slimbox2 from Christophe Beyls - http://www.digitalia.be.

[offtherockcycle]

Thanks Norman. The files were in already, as well as the lines of codes.

I'm taking a good look at Slimbox now, and I'll treble-check everything.
I'll let you know how I'm getting on.

[offtherockcycle]

Right, now that's working, but the image is displayed at the bottom of the extended information page, not on a superimposed layer.

... reading code on... (brains nearly melted! But good fun)...

[offtherockcycle]

...And with Slimbox, image appears in new window.

[NormanRouxel]

This is because (1) you're using the MooTools Slimbox instead of the jQuery based Slimbox2 I recommended in post #4. And (2) you've put

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

Which won't work as there's no js folder on your server. Use

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slimbox.js"></script>

And make sure those JS files are in your Site folder.

P.S. I much prefer jQuery based add-ons.

[offtherockcycle]

Missed that! But now I've the same problem as with original lightbox, part of image appears at bottom of the page.

I know nothing about JQuery, I'll read on.

Thank you.

[NormanRouxel]

You now have

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slimbox2.js">

You've forgotten to put </script> at the end.

Also, you haven't got jquery.js in your Site folder. You need to download that (I recommend jquery-1.7.min.js), save it into your Site folder and make sure the filename matches the <script ...> tag.

[offtherockcycle]

Ok, that's done. Sorry I'm much slower than you! But I'm still getting the same problem of the image appearing at the bottom.
What I don't understand, is why the slimbox2.css file doesn't show on the code from the uploaded site, and whether that is the problem.
I've checked again, and have got

<link href="actinic.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="slimbox2.css" type="text/css" media="screen">

in the <head>.

[NormanRouxel]

I don't see

<link rel="stylesheet" href="slimbox2.css" type="text/css" media="screen">

on your uploaded page. Double-check it's really in your overall layout.

[NormanRouxel]

A final thing you need to do (once you get that CSS tag loaded) is to edit slimbox2.css and look for all URL bits. E.g.

url(loading.gif)

change them to

url('loading.gif')

As Actinic needs to see the quotes to upload these images. And, of course, you need to have saved all such images in your Site folder.

[offtherockcycle]

Ok, thanks for the instructions.

For the css tag, I clicked on the Design tab, clicked on the background of the site (away from the inner layout), and have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><actinic:variable name="PageTitle" /></title>

<actinic:variable name="BaseHref" />

<actinic:variable name="MetaTags" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" />"></actinic:block>

<link href="actinic.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="slimbox2.css" type="text/css" media="screen">


I really don't get why it's not in the uploaded version. I have refreshed the site too, and for good measure, deleted the version on the server before doing that.

[NormanRouxel]

Put some diagnostic code in. E.g.

<link href="actinic.css" rel="stylesheet" type="text/css">
XXX
<link rel="stylesheet" href="slimbox2.css" type="text/css" media="screen">
YYY

See if it appears on the source of your uploaded page.

If it does, the missing line is a mystery. If it doesn't you're editing the wrong layout or not uploading properly.