Thread: Using a lightbox on product images

As far as I understand, it is necessary to have source code to add a lightbox to product images instead of the standard new windows popup.

However, I was wondering if using jQuery to access the DOM, would it be possible to access the script generated by ADNSF, and replace it with a script to call a jQuery lightbox.

I'm not confortable enough with javascript/jQuery, but do you guys think that would be possible, to replace a < script > block content?

You would be better off recoding how images are displayed all together than attempting to change another script.

For one of our clients they wanted to use MagicZoom, we originally coded the new JS zoom directly into the XML packages. The images all follow the same naming conversion so it is fairly easy to do checks if the image is there or not.

We then changed that code into the App_Code so we could speed up the operation and keep the XML's clean.

I would recommend recoding your own image solution and just not using the standard ASPDNSF one. For e-tradecounter we achieved full functionality of variants/multi images/single images without touching any source code.

variant images - http://www.e-tradecounter.co.uk/p-11...icro-fire.aspx
multi image - http://www.e-tradecounter.co.uk/p-11...ge-heater.aspx

You can pretty much code anything up for the images just by checking what images have been uploaded
test="aspdnsf:FileExists(concat('~/images/variant/medium/', VariantID, '.jpg')) = 'true'"

Hope that helps you get on the right track. Anything else just ask.

Thank you so much for your help. I'm not sure it will be an easy task for me as I'm still in my early stages of understanding XPath and ADNSF.

I guess the hard part will be dealing with multi-image situations and being able to do all that in the xmlpackage. But if someone else did it, that it means it can be done

Thanks again!

fsantos

I dont know how to code xpath to get the list of all images of a product...

It would be great to have a <ul> of the images available for the product and the corresponding url for the large image.

That way it would be really easy to come up with a lightbox solution done only in the xmlpackage.

Anyone can show how bright you are with xpath and adnsf and share some code in here?

Thanks again!

fsantos

Thanks to your tip

Code:

test="aspdnsf:FileExists(concat('~/images/variant/medium/', VariantID, '.jpg')) = 'true'"

I was able to solve the issue

It is not very sophisticated, but I do have a "lightbox" now. It also supports multi-image (even though I don't have - yet - the mini icons below the product image).

Thanks again for your help DotNetDevelopments!

fsantos

I am also trying to incorporate a basic js lightbox for a specific category of products. After hours of looking up info here in the forums, I've seen lots of great ideas and helpful hints, but I have one question: does the "aspdnsf:FileExists" option support wildcards? I'm trying to avoid repeating the same line over and over again to build the array since I have no idea how many images there will be for a given product. It could be 2 or 25... depends on the product.

What I don't want:
test="aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_1_.jpg')) = 'true'"
test="aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_2_.jpg')) = 'true'"
test="aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_3_.jpg')) = 'true'"
test="aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_4_.jpg')) = 'true'"
test="aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_5_.jpg')) = 'true'"

etc....

The lightbox code basically looks for a <ul><li> list and processes the images from there. So really all I need to do is genarate the html to make it work.
Example:

HTML Code:

<ul id="slideshow">
		<li>
			<h3>Product Title</h3>
			<span>/images/product/large/1234_1_.jpg</span>
			<p>Product Description</p>
			<a href="#"><img src="/images/product/icon/1234_1_.jpg" alt="Product Name" /></a>
		</li>
		<li>
			<h3>Product Title</h3>
			<span>/images/product/large/1234_2_.jpg</span>
			<p>Product Description</p>
			<a href="#"><img src="/images/product/icon/1234_2_.jpg" alt="Product Name" /></a>
		</li>
</ul>

I'd like a way to build a simple list of the available images for product if and only if it has multiple images.

Sugestions?

I've done what you want to do, but I followed exactly the approach you do not want

If you have enough knowledge on xpath/xslt I think it will not be too dificult to create a "do/while" loop to save you from typing the same statement too many times.

I didn't have enough time to invest on that so I just used copy/paste. Its not elegant but works.

The other option will "force" you to touch the source code. Even if you have it, remember the more you touch it, the more difficult it will be apply upgrades because you will have to go through it again.

I hope this helps!

fsantos

Originally Posted by fsantos

If you have enough knowledge on xpath/xslt I think it will not be too dificult to create a "do/while" loop to save you from typing the same statement too many times.
fsantos

Yeah, ideally a foreach (var imgFile in aspdnsf:FileExists(concat('~/images/product/icon/', ProductID, '_*_.jpg')) = 'true'") kind of thing would be perfect, but as you said, the cut and paste solution would work as a last resort.

Thanks!

Hey guys just wanted to jump back in on this one.

There is no real "nice" way to do this unless you want to go digging into the core and changing how ASPDNSF handles images.

This is the method we like to use. We use this method on the product pages for e-tradecounter.co.uk.

We create a new .cs page inside the App_Code and do all the heavy lifting in there. In regards to just hard coding the images the standard ASPDNSF does not take more than 10 multi images. This means we can easily create a for loop inside the .cs file.

C#/VB.NET Code:

                for (int i = 1; i < 11; i++)
                {
                    if (CommonLogic.FileExists("~/images/product/large/" + ProductID.ToString() + "_" + i.ToString() + "_.jpg"))
                    {
                        tmpS.Append("<a href=\"images/product/large/" + ProductID.ToString() + "_" + i.ToString() + "_.jpg\" title=\"" + ManufacturerName + " " + SEAlt + "\">");
                        tmpS.Append("<img border=\"0\" alt=\"" + ManufacturerName + " " + SEAlt + "\" src=\"images/product/icon/" + ProductID.ToString() + "_" + i.ToString() + "_.jpg\" />");
                        tmpS.Append("</a>");
                    }
                } 


As the code is all inside the App_Code it runs quicker than inside an XML package. However every time you change the file it causes a recompile. So be sure you are happy with it before going live, otherwise your customers will end up with a painfully slow experience while you are making changes.

Because we wanted our image zoom to be highly flexible we spilt it up into three different parts. Product Images, Variants Images and Default Variant Image.

So after we have linked up our custom .cs file with our XML package we can simply call this on every product page where we want images.

HTML Code:

<xsl:choose>
                <xsl:when test="aspdnsf:FileExists(concat('~/images/variant/medium/', VariantID, '.jpg')) = 'true'">
                  <xsl:value-of select="mz:VariantMainImage(VariantID, $pName, '', $AltText)" disable-output-escaping="yes"/>
                  <div id="ExtraImages">
                    <xsl:for-each select="/root/ProductVariants/Variant">
                      <xsl:value-of select="mz:VariantMultiImage(VariantID, $pName, '', $AltText)" disable-output-escaping="yes"/>
                    </xsl:for-each>
                  </div>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:value-of select="mz:ProductMultiImage(ProductID, $pName, '', $AltText)" disable-output-escaping="yes"/>
                </xsl:otherwise>
              </xsl:choose>

This means we can easily show a single variant with 10 multi images, a single variant image or multiple variant images and even an image missing.

We originally had all the code inside the XML Packages and it was not only slow but a nightmare to maintain, plus if you made a change you would have to copy it to every XML. I strongly suggest doing any new lightbox in the App_Code (easier to upgrade, don't need source and highly flexible.)

Hope that gives you guys some new ideas.

Originally Posted by DotNetDevelopments

HTML Code:

                  <xsl:value-of select="mz:VariantMainImage(VariantID, $pName, '', $AltText)" disable-output-escaping="yes"/>

My next question: How do you reference your .cs page by calling "mz:VariantMainImage()" Is that the class:function?

Yep correct.

So this is how we do it.

In the App_Code create a new folder called Custom, this is where we create all the new files so its easy to find.

Inside your new folder create a C# file. Call the file helper.cs
You want to edit the new file so it looks like this...

C#/VB.NET Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AspDotNetStorefrontCore;

public class helper
{
    public helper() { }

    #region Display Text
    /// <summary>
    /// Displays text
    /// </summary>
    public virtual string CallMe()
    {
        return "String Has Been Called.";
    }
    #endregion
} 


Now in your web.config file you want to edit the XSLTExtensionObjects. I beleive by default it should look like this...

HTML Code:

<xsltobjects defaultExtension="">
			<extensions>
				<clear/>
				<add name="receipt" namespace="urn:receipt" type="ReceiptXsltExtension, app_code">
				</add>
			</extensions>
		</xsltobjects>

Your one might look a little different. Eitherway under receipt and the closing add tag you want to add.

HTML Code:

<add name="Helper" namespace="urn:Helper" type="helper, app_code">
</add>

Now back inside your XML file you need to call Helper. After the first <PackageTransform> you have the xsl:stylesheet it is inside that we will be making our last change.

Look inside the xsl:stylesheet tag for xmlns:aspdnsf="urn:aspdnsf" after this you want to add xmlns:help="urn:Helper" then at the end you will will exclude-result-prefixes. You want to change this so it includes the new Helper class. So you want it to look like this exclude-result-prefixes="aspdnsf help" a space in between each prefix.

Now finally your stylesheet tag should look like this.

HTML Code:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" xmlns:help="urn:Helper" exclude-result-prefixes="aspdnsf help">

There we go. We can now call anything inside the Helper.cs file inside our App_Code. So lets call that string.

HTML Code:

<xsl:value-of select="help:CallMe()" />

Done and working!
I know this is a real basic example but that is what I mean when I say do all the heavy lifting in the App_Code and how we link our custom C# files without the source.

Hopefully cleared up any questions

Edit: I cover the same idea here
http://forums.aspdotnetstorefront.co...350#post107350
So hopefully between the two posts you can set yourself up doing all kinds of awesome stuff.

Your explanation just saved me days of sleepless nights. I have wondered how all that worked for years actually, but never needed to ask. Thank you so much for such a detailed description. I'll post back here once I get it all working.

I finally found time to revisit this and everything worked flawlessly. I had a few hiccups, but I had everything cleaned up and working 5 min later. I can't even begin to explain how this opens up so many doors into the power of the xml packages and my misunderstood limitations.

You can see the results of my helper here by clicking on the SlideShow link:
http://www.brucerossmeyer.com/p-6531...oppers-mc.aspx

Thanks again for the instructions and tips!

OK, now that I have the slide show working on the bike pages and the event galleries, and I'm getting loads of compliments, I just realized that the lightbox is not working in safari or chrome. I have gone mad for two days trying to figure this out. If I drop a basic Sample.html page on the site with hard-coded image links and js file references, it works fine in all browsers. If I put the same links in my EventGallery.aspx page, they stop working. It makes no difference if I hard code them or have them render dynamically from the code behind. They stop working either way.

I have tested this in different directories, different pages and different images - always the same results. It fails to function on any dynamically rendered .aspx page. I have tried loading the references from the template.master as well as copy and pasting them right in the aspx page without success. When you click on the image to view the lightbox gallery, it just redirects you to the image as if it were a normal hyperlink ignoring the js libraries.

references:

HTML Code:

<link rel="stylesheet" href="/jscripts/Lightbox2/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/jscripts/Lightbox2/prototype.js"></script>
<script type="text/javascript" src="/jscripts/Lightbox2/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/jscripts/Lightbox2/lightbox.js"></script>

image links:

HTML Code:

<a href="/images/gallery/Image01.gif" title="" rel="lightbox[BikeWeek]"><img src="/images/gallery/Image01.gif" alt="Tsttt" /></a>
<a href="/images/gallery/Image02.gif" title="" rel="lightbox[BikeWeek]"><img src="/images/gallery/Image02.gif" alt="Tsttt" /></a>
<a href="/images/gallery/Image03.gif" title="" rel="lightbox[BikeWeek]"><img src="/images/gallery/Image03.gif" alt="Tsttt" /></a>

Everything is obviously there because they render perfectly in both IE and Firefox. Any ideas?

Here are some links to what I'm talking about:

This one does not work in safari:
http://dev.aspdotnetstorefront.bruce...ntGallery.aspx

This one does:
http://dev.aspdotnetstorefront.bruce...ox2/sample.htm

Have you tried using the debugging tools in Chrome to see what is happening? Does it work in Opera?