Thread: Lightbox instead of Popup

I'm new to this Storefront software.

Has anyone replaced the Large image popup with Lightbox?

If so, how did you do it?

It's pretty easy, if you have source code, you can integrate it with the LookupProductImage extension in a few easy steps.

Here i've placed the lytebox files inside the skin_{current}/lytebox folder.
Modify the XSLTExtensionBase.cs/LookupProductImage

1. Add the necessary references to the javascript and css files

2. Remove the onclick call to the popup window, change the <a href to the large image path and add the rel="lytebox" attribute.

Code:

 else if (HasLargePic)
                {
                    // lytebox script and css references
                    tmpS.AppendFormat("<script type=\"text/javascript\" language=\"javascript\" src=\"skins/skin_{0}/lytebox/lytebox.js\"></script>", ThisCustomer.SkinID);
                    tmpS.AppendFormat("<link rel=\"stylesheet\" href=\"skins/skin_{0}/lytebox/lytebox.css\" type=\"text/css\" media=\"screen\" />", ThisCustomer.SkinID);
                        
                    tmpS.Append("<br/><img border=\"0\" src=\"images/spacer.gif\" width=\"1\" height=\"4\" /><br/>");
                    // original:
                    //tmpS.Append("<div align=\"center\"><a href=\"javascript:void(0);\" onClick=\"" + CommonLogic.IIF(ImgGal.HasSomeLarge, "popuplarge" + "_" + sProductID + "()", "popupimg('" + LargePicForPopup + "')") + ";\"><img border=\"0\" src=\"" + AppLogic.LocateImageURL("skins/skin_" + ThisCustomer.SkinID.ToString() + "/images/showlarger.gif") + "\" align=\"absmiddle\" border=\"0\" title=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\"  alt=\"" + AltText + "\" /></a></div><br/>");
                    // using lytebox:
                    tmpS.Append("<div align=\"center\"><a href=\"" + LargePicForPopup + "\" rel=\"lytebox\" ><img border=\"0\" src=\"" + AppLogic.LocateImageURL("skins/skin_" + ThisCustomer.SkinID.ToString() + "/images/showlarger.gif") + "\" align=\"absmiddle\" border=\"0\" title=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\"  alt=\"" + AltText + "\" /></a></div><br/>");
                }

Hi Mark,

I am trying to do this mod but I cannot find the file XSLTExtensionBase.cs anywhere in my source code, I can only find the file XSLTExtension.cs

I have just purchased the software so it is the latest version (AspDotNetStorefront ML 8.0.1.2 with source C#), could this be the problem?

Please help

Hi,

Forget my last question, I found the file and added the code as in your example.

But for some reason it doesn't seem to work. Do you need to include the following in the head of the main skin template also?

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


Also in your code example you have skin_{0} should I replace the {0} with my skin number or does the code do this?

Also you say "1. Add the necessary references to the javascript and css files" I have assumed you have already done this in your code example?


I have followed the instructions above exactly and also deleted all cookies and temporary internet files on my site but it still shows the old popup box for the large image
Any help would be really appreciated.

But for some reason it doesn't seem to work. Do you need to include the following in the head of the main skin template also?

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

that won't be necessary, i've added the reference in code inside the LookupProductImage extension so that it'll only get referenced when the large image section gets displayed

Code:

else if (HasLargePic)
                {
                    // lytebox script and css references
                    tmpS.AppendFormat("<script type=\"text/javascript\" language=\"javascript\" src=\"skins/skin_{0}/lytebox/lytebox.js\"></script>", ThisCustomer.SkinID);
                    tmpS.AppendFormat("<link rel=\"stylesheet\" href=\"skins/skin_{0}/lytebox/lytebox.css\" type=\"text/css\" media=\"screen\" />", ThisCustomer.SkinID);
                        
                    tmpS.Append("<br/><img border=\"0\" src=\"images/spacer.gif\" width=\"1\" height=\"4\" /><br/>");
                    // original:
                    //tmpS.Append("<div align=\"center\"><a href=\"javascript:void(0);\" onClick=\"" + CommonLogic.IIF(ImgGal.HasSomeLarge, "popuplarge" + "_" + sProductID + "()", "popupimg('" + LargePicForPopup + "')") + ";\"><img border=\"0\" src=\"" + AppLogic.LocateImageURL("skins/skin_" + ThisCustomer.SkinID.ToString() + "/images/showlarger.gif") + "\" align=\"absmiddle\" border=\"0\" title=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\"  alt=\"" + AltText + "\" /></a></div><br/>");
                    // using lytebox:
                    tmpS.Append("<div align=\"center\"><a href=\"" + LargePicForPopup + "\" rel=\"lytebox\" ><img border=\"0\" src=\"" + AppLogic.LocateImageURL("skins/skin_" + ThisCustomer.SkinID.ToString() + "/images/showlarger.gif") + "\" align=\"absmiddle\" border=\"0\" title=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\"  alt=\"" + AltText + "\" /></a></div><br/>");
                }

Also in your code example you have skin_{0} should I replace the {0} with my skin number or does the code do this?

Yes, i was pertaining to your currently used skin id, in other words, if you're using just one skin = skin_1

Also you say "1. Add the necessary references to the javascript and css files" I have assumed you have already done this in your code example?

For example purposes, i just placed the lytebox folder inside the skin folder(skins/skin_1/lytebox/{contents here}), you can place it anywhere you want, just modify the path in code accordingly

Hi,

I have done all of this and placed the lytebox code in the same location (I am using skin_1) skins/skin_1/lytebox/
Removed the code from the template as header as you say it is not needed, and named the relative skin number in the code in the XSLTExtensionBase.cs/LookupProductImage file.

But is still does not work, the only thing that has happened is that now if I click on an image from my site on the product display page a smaller popup box with the same pic that I originally had appears

I have double checked the code and everything seems correct, I have also cleaered by browser cache?

Any ideas to help me understand what the problem is?

Great work Mark! Works perfectly!

I also changed this

Code:

else if (HasLargePic)
                /*
                {
                    tmpS.Append("<img border=\"0\" id=\"ProductPic" + ProductID.ToString() + "\" name=\"ProductPic" + ProductID.ToString() + "\" style=\"cursor:hand;cursor:pointer;\" onClick=\"" + CommonLogic.IIF(ImgGal.HasSomeLarge, "popuplarge" + "_" + sProductID + "()", "popupimg('" + LargePicForPopup + "')") + "\" alt=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\" src=\"" + ProductPicture + "\" />");
                }
                */
                {
                    tmpS.Append("<a href=\"" + LargePicForPopup + "\" rel=\"lytebox\" ><img border=\"0\" id=\"ProductPic" + ProductID.ToString() + "\" name=\"ProductPic" + ProductID.ToString() + "\" style=\"cursor:hand;cursor:pointer;\" alt=\"" + AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) + "\" src=\"" + ProductPicture + "\" />");
                }

so that also the middle-sized product image opens the lytebox

What is lytebox? Do you have an example website that has that implemented? Thx.

Originally Posted by jamotion

What is lytebox? Do you have an example website that has that implemented? Thx.

L L

http://lmgtfy.com/?q=lytebox&l=1

Two things I ran into doing this which by the way is really nice. The first of which is that LookupProductImage has two overloads the second of which takes AltText as a parameter and is the one that should be updated. I goofed and modd'ed the first overload which obviously produced no result. I also had to add the following: HttpUtility.UrlDecode(LargePicForPopup) to get it to work. But thanks for the post. Really liked the results

Can you advice on how I can achieve this using the vb.net version of the source code?

Thanks a lot

Checkout this hover over large image we implemented: http://exteriorsolutions.com/p-80-24...-fire-pit.aspx

Nice idea guys, I will be trying this out!

Sticky FTW!

Ok, I must really be missing the boat on this one. I have C# ADNSF version 8.0.12 source and have entered this code to the C:\AspDotNetStorefront\ASPDNSFCore\XSLTExtensionBa se.cs as shown. Any clicks on a product does not call this code but calls popup.aspx which launches a popup window.

Any help out there please?

Hemilis

We initially came across the same problems as you did.

We have also implemented Lyteshow which needs a few more mods to implement

One more thing,

"Lytebox" has a bug and doesn't work properly with IE8

There are a couple of fixes on the net but we found them to be technically flawed even though they did the job.

We have developed our own fix so that it operates correctly, I can post here if anyone is interested?

Yes please

Originally Posted by fun123

One more thing,

"Lytebox" has a bug and doesn't work properly with IE8

There are a couple of fixes on the net but we found them to be technically flawed even though they did the job.

We have developed our own fix so that it operates correctly, I can post here if anyone is interested?

Yes please post whatever you can, it would be appreciated.

// /*@cc_on
// /*@if (@_jscript)
// this.ie = (document.all && !window.opera) ? checkVersion() : false;
// /*@else @*/
// this.ie = false;
// /*@end
// @*/
// this.ie7 = (this.ie && window.XMLHttpRequest);

if(/MSIE\s*8/.test(navigator.userAgent))
{this.ie=this.ie7=false;}
else if(this.ie = navigator.userAgent && /MSIE/.test(navigator.userAgent)){
this.ie7 = /MSIE\s*7/.test(navigator.userAgent);
}
//if(location.href.indexOf('localhost')>-1)
//alert('ie: '+this.ie+', ie7'+this.ie7);


this.initialize();

Originally Posted by TimMapes

Ok, I must really be missing the boat on this one. I have C# ADNSF version 8.0.12 source and have entered this code to the C:\AspDotNetStorefront\ASPDNSFCore\XSLTExtensionBa se.cs as shown. Any clicks on a product does not call this code but calls popup.aspx which launches a popup window.

Any help out there please?

Anyone? is there some setting in ASPDNSF that makes it call the code in C:\AspDotNetStorefront\ASPDNSFCore\XSLTExtensionBa se.cs and not the popup.aspx?

Tim

i am running version 7.0.2.0 and used both lightbox and slimbox with no issues...

i'm not sure if the structure is the same throughout the version numbers as we are running a really old version now, but I just made a very simple link within a styled div on the product.SimpleProduct.xml.config page (code below)


<div class="zoomHold">
<a class="zoom" rel="lightbox">
<xsl:attribute name="href">images/PRODUCT/large/<xsl:value-of select="SKU"/>.jpg</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
</a>
<strong>
<a rel="lightbox">
<xsl:attribute name="title">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:attribute name="href">images/PRODUCT/large/<xsl:value-of select="SKU"/>.jpg</xsl:attribute>Click to see large image.
</a>
</strong>
</div>

I then call the JScript from the template page..

Hopefully that helps....

Does any one know if this can be done in v8 without the source code?

Thanks

It really depends on the types of product images you are utilizing in ASPDNSF.

If you are using simple thumb/medium/large photos on a per-product basis, then yes lightbox can be implemented without the need for source code.

If you are using the multi-image manager for products then you need to write your own image retrieval/rendering code based on the ASPDNSF version (which is in source code).

We have built this for clients of ours. You can see an example of this in action, for the multi-image managed version here:

http://www.palmbeachautographs.com/p...ni-helmet.aspx

If you are using simple thumb/medium/large photos on a per-product basis, then yes lightbox can be implemented without the need for source code.

That's what we are using, do you have any pointers on where to start with this?

Any ideas anyone?

Yeah some help would be greatly appreciated on this. I can get lightbox to start to work by wrapping <xsl:value-of select="LookupProductImage with <a rel="lightbox"></a>, but the image still shows up in a pop-up and not in lightbox.

Does anyone have this working on 9.0? I have it working for single images but am not having any luck on multiple images for one product.

Originally Posted by zaffer

i am running version 7.0.2.0 and used both lightbox and slimbox with no issues...

i'm not sure if the structure is the same throughout the version numbers as we are running a really old version now, but I just made a very simple link within a styled div on the product.SimpleProduct.xml.config page (code below)


<div class="zoomHold">
<a class="zoom" rel="lightbox">
<xsl:attribute name="href">images/PRODUCT/large/<xsl:value-of select="SKU"/>.jpg</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
</a>
<strong>
<a rel="lightbox">
<xsl:attribute name="title">
<xsl:value-of select="$pName" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:attribute name="href">images/PRODUCT/large/<xsl:value-of select="SKU"/>.jpg</xsl:attribute>Click to see large image.
</a>
</strong>
</div>

I then call the JScript from the template page..

Hopefully that helps....

Ok what does the code look like for the
"I then call the JScript from the template page.."

Tim

I'm running v9 and I couldn't find any single place to modify XSLTExtensionBase.vb to include the rel=lytebox. Therefor I decided to modify the Public Shared Function PopupImage routine. All I did was comment out what is there and add in this line:

Code:

Return _
"<script type='text/javascript' src='lightbox/lightbox.js'></script>" & ControlChars.CrLf & _
"<link rel='StyleSheet' href='lightbox/style.css' type='text/css' media='screen'>" & ControlChars.CrLf

I'm not using a standard lytebox here; I'm using one that can be called from a JavaScript call. I just renamed the called function to popupimg to match what ASPDNSF is already using and everything worked great.

In case you are wondering, the code for lightbox.js is:

Code:

//based on
//http://www.xul.fr/javascript/lightbox-dynamic.html
//http://stackoverflow.com/questions/106828/javascript-get-image-height

var ajaxImage = "images/lightbox/ajax-loader.gif";
var ajaxImageWidth = 100;
var ajaxImageHeight = 100;
var titleBarHeight = 25;
var boarderWidth = 10;

var imgURL;
var boxHeight;
var boxWidth;
var boxMarginTop;
var boxMarginLeft;

function getImgSize() {
    var myImage = new Image();
    myImage.onload = resizeBox;
    myImage.src = imgURL;
}

function popupimg(url, imgTitle) {
    imgURL = ajaxImage;

    if (imgTitle == undefined) {
        imgTitle = "";
    }

    var box = document.getElementById('box');

    if (!box) {
        createBox();
        box = document.getElementById('box');
    }

    document.getElementById('filter').style.display = 'block';
    document.getElementById('boxtitle').innerHTML = imgTitle;

    sizeBox(ajaxImageHeight, ajaxImageWidth);

    imgURL = unescape(url);
    getImgSize();
}

function resizeBox() {
    var imgHeight = this.height;
    var imgWidth = this.width;

    sizeBox(imgHeight, imgWidth);
}

function sizeBox(height, width) {
    document.getElementById('boxcontent').innerHTML = "<img src=" + imgURL + " />";

    getBoxSize(height, width);

    var box = document.getElementById('box');
    box.style.height = boxHeight + "px";
    box.style.width = boxWidth + "px";
    box.style.marginTop = boxMarginTop + "px";
    box.style.marginLeft = boxMarginLeft + "px";
    box.style.display = 'block';
}

function getBoxSize(imgHeight, imgWidth) {
    boxHeight = imgHeight;
    boxWidth = imgWidth;
    var scrollHorizontal = false;
    var scrollVertical = false;
    var windowWidth = window.innerWidth - 30;
    var windowHeight = window.innerHeight - 30;

    boxHeight += titleBarHeight;

    if (boxHeight > windowHeight) {
        boxHeight = windowHeight - (boarderWidth * 2);
        scrollVertical = true;
    }

    if (boxWidth > windowWidth) {
        boxWidth = windowWidth - (boarderWidth * 2);
        scrollHorizontal = true;
    }

    if (scrollHorizontal) {
        boxHeight += 20;
    }

    if (scrollVertical) {
        boxWidth += 20;
    }

    boxMarginTop = -(boxHeight + boarderWidth * 2) / 2;
    boxMarginLeft = -(boxWidth + boarderWidth * 2) / 2;

}

function closeBox() {
    document.getElementById('box').style.display = 'none';
    document.getElementById('filter').style.display = 'none';
    document.getElementById('boxcontent').innerHTML = "<img src='" + ajaxImage + "' />";
}

function createBox() {
    var theBody = document.getElementsByTagName("body")[0];

    var newFilter = document.createElement("div");
    newFilter.setAttribute("id", "filter")
    newFilter.setAttribute("onclick", "javascript:closeBox()\x3B");
    theBody.appendChild(newFilter);

    var newBox = document.createElement("div");
    newBox.setAttribute("id", "box");
    newBox.setAttribute("onclick", "javascript:closeBox()\x3B");
    var newBoxHeader = document.createElement("div");
    newBoxHeader.setAttribute("id", "boxheader");
    var newBoxTitle = document.createElement("span");
    newBoxTitle.setAttribute("id", "boxtitle");
    newBoxHeader.appendChild(newBoxTitle);
    var newBoxClose = document.createElement("span");
    newBoxClose.setAttribute("id", "boxclose");
    var newBoxCloseText = document.createTextNode("X");
    newBoxClose.appendChild(newBoxCloseText);
    newBoxHeader.appendChild(newBoxClose);
    newBox.appendChild(newBoxHeader);
    var newBoxContent = document.createElement("div");
    newBoxContent.setAttribute("id", "boxcontent");
    var newBoxContentLoading = document.createElement("img");
    newBoxContentLoading.setAttribute("src", ajaxImage);
    newBoxContent.appendChild(newBoxContentLoading);
    newBox.appendChild(newBoxContent);
    theBody.appendChild(newBox);
}

And the code for style.css is:

Code:

        #filter {
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: 10000;
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        #box {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            padding: 0;
            margin: 0;
            margin-left: -50px;
            margin-top: -50px;
            border: 10px solid white;
            background-color: white;
            z-index: 10001;
            overflow: auto;
            font-family: Sans-Serif;
            font-weight: bold;
        }
        #boxheader {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 20px;
            padding-top: 2px;
            padding-bottom: 2px;
            color: black;
            text-align: center;
            overflow: hidden;
        }
        #boxclose {
            float: right;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #CCC;
            border: 1px solid black;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        #boxcontent {
            position: absolute;
            top: 23px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            overflow: auto;
            width: auto;
            height: auto;
        }

I was able to get the button working to open the large image in lytebox but when I click on the actual image, that pops up a real pop up instead. Any ideas for this?

Did you use the modified routine that I posted above or some other method?

I changed the rel="lytebox".

You're probably missing one of the many instances in XSLTExtensionBase.vb that you'll need to modify. That is why I decided against going that route. The less source I have to modify the better.

Originally Posted by chrismartz

I was able to get the button working to open the large image in lytebox but when I click on the actual image, that pops up a real pop up instead. Any ideas for this?

Hi, you need to remove the onclick event on the image tag for the product picture here:

Code:

                If HasLargePic Then
                    'Original
                    'tmpS.Append("<img border=""0"" id=""ProductPic" & ProductID.ToString() & """ name=""ProductPic" & ProductID.ToString() & """ style=""cursor:hand;cursor:pointer;"" onClick=""" & CommonLogic.IIF(ImgGal.HasSomeLarge, "popuplarge()", "popupimg('" & LargePicForPopup & "')") & """ alt=""" & AppLogic.GetString("showproduct.aspx.19", ThisCustomer.SkinID, ThisCustomer.LocaleSetting) & """ src=""" & ProductPicture & """ />")
                    tmpS.Append("<img border=""0"" id=""ProductPic" & ProductID.ToString() & """ name=""ProductPic" & ProductID.ToString() & """ style=""cursor:pointer;""  src=""" & ProductPicture & """ />")
                Else
                    tmpS.Append("<img border=""0"" id=""ProductPic" & ProductID.ToString() & """ name=""ProductPic" & ProductID.ToString() & """ src=""" & ProductPicture & """  />")
                End If

Currently working on a site based on the Channel-advisor offering and the client wanted a lighbox style image gallery on the product page. Read this page a few times and as we don't get source code or access to the app code folder I was a little stumped where to go with this.

It not the best solution by a long shot but I have completely rebuilt the gallery for this client. The updated xml pulls in a large image and up to the full 10 thumbs with a host of jquery plug-in going on in the background.

Please excuse the styling on the site as its still under construction but this page give you a good idea of how the gallery works.

http://sap209.channeladvisor.com/p-2031-bcase-xxb8482-salmon-clasp-1100-vintage-series.aspx?skinid=3