How to add lightbox feature in other pages ?

I want to display image on "About us" page and when any user will click on that image, it should open the image by lightbox capabililty:

To add lightbox feature in about us page, i have added this in AboutUs.aspx.cs page:

protected override void OnPreRender(EventArgs e)
        {
            string jquery = CommonHelper.GetStoreLocation() + "Scripts/jquery-1.3.2.min.js";
            Page.ClientScript.RegisterClientScriptInclude(jquery, jquery);

            string slimBox = CommonHelper.GetStoreLocation() + "Scripts/slimbox2.js";
            Page.ClientScript.RegisterClientScriptInclude(slimBox, slimBox);

            base.OnPreRender(e);
        }

1) saved the page

2) re-build the project

3) from the admin section added an image in about us topic page

4) Made  the image as hyperlink image as lightbox requires hyperlink image (click-able image):

href="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg"><img height="77" alt="" src="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg" width="182" style="width: 182px; height: 77px" /></a>

but when i click on the image (on about us page), it opens the image in browser...why the page is not using lightbox code ?

anyone ?

From the slimbox documentation (http://www.digitalia.be/software/slimbox2#usage, see the ACTIVATE section):

"Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>"

.

ok i tried almost everything but it seems like it is not working at all

in my about us page i want to add images and want lightbox to work

in my about us page i added this:

<%@ Register TagPrefix="nopCommerce" TagName="SimpleTextBox" Src="~/Modules/SimpleTextBox.ascx" %>

in masterpages/root.master

i added this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="../css/slimbox2.js" type="text/javascript"></script>
    <link href="../css/slimbox2.css" rel="stylesheet" type="text/css" />

i added a css folder in the project and added slimbox2.js file and slimbox2.css and all the images used for lightbox (like NEXT, PREV etc)

on about us page, i added this:
<a href="http://localhost:1105/1sttheme/images/thumbs/0000013.jpeg" rel="lightbox" title="myimage"><img alt="pic" src="http://localhost:1105/1sttheme/images/thumbs/0000013_100.jpeg" /></a><br />


now when i run the project and go to about us page and click on image, the image gets open in different internet explorer window and lightbox is not working at all...

anyone ?

Andei could you please help me with this issue ?

The first thing that you need to do is add a scriptmanager to the page... you can't make ANY scripts work without a scriptmanager on the page.

<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
    EnableScriptLocalization="true" ID="sm1" ScriptMode="Release" CompositeScript-ScriptMode="Release" />

Your code to add the scripts to the page in preRender looks good.

After that I'm not sure... I don't have my code out... I'll have to get back to you on that.

ok barry i'll wait for your reply as i want to add lightbox functionality on all the other pages like about us, contact us, or pages added from topic section in admin's side.

and i know adding scriptmanager is also a problem as it needs to be added in such a way that it doesn't conflict with other scriptmanager as it will create error if something exists already

Check out: http://mynewcomicshop.net/aboutus.aspx

This isn't all that hard... :)

I have this on my root.master - you said you wanted to be able to use the lightbox on any page, so the root.master is the way to go I think.

root.master (script manager):

<ajaxToolKit:ToolkitScriptManager runat="server" EnableScriptGlobalization="true"
EnableScriptLocalization="true" ID="smRoot" ScriptMode="Release" CompositeScript-ScriptMode="Release" />

root.master.cs (register scripts):

you will need to put this in the "using" section for the "CommonHelper" to work:

using NopSolutions.NopCommerce.Common.Utils;

then to register the scripts...

protected override void OnPreRender(EventArgs e)
{
   string jquery = CommonHelper.GetStoreLocation() + "Scripts/jquery-1.4.min.js";
   Page.ClientScript.RegisterClientScriptInclude(jquery, jquery);

   string slimbox = CommonHelper.GetStoreLocation() + "Scripts/slimbox2.js";
   Page.ClientScript.RegisterClientScriptInclude(slimbox, slimbox);
}

Then on any page that you want the lightbox to work you have a link like this:

<a href="http://mynewcomicshop.net/images/thumbs/0000143.jpeg" rel="lightbox-pd" title="Canon Digital Rebel XSi 12.2 MP Digital SLR Camera"><img src="http://mynewcomicshop.net/images/thumbs/0000143_70.jpeg" alt="Product image" /></a>

Notice the "rel" tag... that is the important part. You HAVE to have a rel tag in order to get it to open in the ligthbox. I believe that "lightbox-pd" means default picture, and "lightbox-p" is just another picture, but I'm not sure - in case you want several pictures on the page and you need to set one to default.

I typed this by hand so if you copy and paste any of this it may be misspelled :)

Give this a shot...

I forgot to mention... you should remove the script manager code from the other places that you find it in order to avoid conflicts. You can leave it where it is in the admin section (that's a different master), but wherever it shows up in the store... delete it.

Also, you may want to remove any references to jquery or the slimbox2 scripts, as they will be on EVERY page as well... just fyi.