@Raheel... what version of umbraco are you using?

can you wait a couple of days? i have a gallery package that could use some updating to be ready to package... but here is an example of it here...

http://www.aklpurdue.com/alumni/photo-archive/the-1940s

it uses jquery, imageGen and fancybox...

let me know if you are interested.

I am using the latest version of Umbraco with .net 4 ...

Yes I am int rested, I can wait a few days.And that gallery is all I require. Ability to list all photos and then showing it with lightbox.

Thanks alot!
Raheel

Hi

that looks interesting!

Does it provide bulk upload for a user with auto thumbnails?

How easy is it to define the size of the displayed photo - or does it rely on using the original photo size?

Can image information (lens, date, exposure etc) be displayed with the photo?

Geoff

Here is a working example using ImageGen to create resizes, and a lightbox script to create popups with larger size images. It uses a page property (galleryalbum - a mediapicker that i use to select a folder) to generate a list of thumbnails and then link to the larger version

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  exclude-result-prefixes="msxml
 umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes 
Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings 
Exslt.ExsltSets ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>
<xsl:variable name="bigW" select="700"/>
<xsl:variable name="bigH" select="700"/>
    
    
<xsl:template match="/">

  <xsl:if test="$currentPage/galleryalbum &gt; 0">
    <xsl:variable name="images" select="umbraco.library:GetMedia($currentPage/galleryalbum, 1)" />
    <xsl:if test="count($images/*) &gt; 0">
      <xsl:for-each select="$images/*">
   <xsl:if test="./umbracoFile != ''">



<a>
    <xsl:attribute name= "class">fancybox gallery</xsl:attribute>
    <xsl:attribute name= "rel">group</xsl:attribute>

      <xsl:choose>
         <xsl:when test="./umbracoWidth &lt; 700 and ./umbracoHeight &lt; 700">
      <xsl:attribute name= "href">
        <xsl:value-of select="./umbracoFile"/>
        </xsl:attribute>
      </xsl:when>
      <xsl:when test="./umbracoWidth &gt; ./umbracoHeight">
      <xsl:attribute name= "href">
        /umbraco/imageGen.aspx?image=<xsl:value-of select="./umbracoFile"/>&amp;width=<xsl:value-of select="$bigW"/>&amp;constrain=true
        </xsl:attribute>
      </xsl:when>
      <xsl:otherwise>
      <xsl:attribute name= "href">
        /umbraco/imageGen.aspx?image=<xsl:value-of select="./umbracoFile"/>&amp;height=<xsl:value-of select="$bigH"/>&amp;constrain=true
        </xsl:attribute>
      </xsl:otherwise>
    </xsl:choose>  
        <img src="/umbraco/ImageGen.ashx?image={./umbracoFile}&amp;height=120&amp;pad=true&amp;bgcolor=white" alt="{./ImgDescription}" title="{./ImgDescription}"/>    
      </a>
        </xsl:if>
      </xsl:for-each>
    </xsl:if>
  </xsl:if>

</xsl:template>

</xsl:stylesheet>

Thanks Rik

Very new to Umbraco and I'm having issues installing ImageGen in a 4.5.2 environment. As soon as I get that resolved I'll install the code and see if I can make it work :)

Geoff

Just install it manually, look at the xml file inside the zip, it'll tell you what to copy to which folder ;)

1. unzip the package on your local disk

2. Copy ImageGen.dll to /bin

3. Copy ImageGen.sample.config to /config

4. Copy ImageGen.aspx and ImageGen.ashx /umbraco

Done ;)

Hi Rik

Thanks - I have installed your xslt file and ImageGen. Also Gecko Uploadify to put images into the media folder I am pointing the gallerAlbum to.

Mostly (!) it works but the images are displayed like a film strip and when I click on one it simply displays in a new browser page.

I assume this is because I have not installed FancyBox? But I cannot find anything about this?

Geoff

indeed, you still need to install this javascript & css & images for everything to work:

http://fancybox.googlecode.com/files/jquery.fancybox-1.3.1.zip

more info: http://fancybox.net/howto

I appreciate your help Rik,

I've spent some hours on this over the last few days and I am obviously missing something very basic.

I haven't done a great deal of web development and am new to .NET and very new to js and xslt. I need to do some reading on both but am also trying to learn by looking at 'working examples' and building them into test sites.

I have copied jquery.easing-1.3.pack.js, jquery.fancybox-1.3.1.js, jquery.fancybox-1.3.1.pack.js and jquery.mousewheel-3.0.2.pack.js and all of the images into a directory called fancybox in the route of my site.

I have copied the content of the fancybox css file into a stylesheet under css called fancybox. I modified all of the image urls to point to url('/fancybox/imagename')

One thing I noticed is that there does not seem to be a style called 'fancybox gallery' which is used in your xslt file
<xsl:attribute name= "class">fancybox gallery</xsl:attribute>

I have added <link rel="stylesheet" href="/css/fancybox.css" type="text/css" media="screen" /> to the Runway Master in the <head> section

It seems that my problem is that I am failing to understand the relationship with the <script> statements.

My assumption was that they should be placed in the Runway Master Template after the <body> tag but this does not work. (I also tried various other 'guesses')

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

Hope you can help me some more.

Hi Geoff

I'm guessing that you probably need to add the script to actually tell fancybox, which content should be showed in the box.

From the example (I just skimmed it) I'm not sure whether it's the fancybox class or the gallery class that should trigger the box.

However...

in the <head> section of your document

try writing the following

$(document).ready(function(){
        $(".gallery").fancybox({});
});

You can modify the visuals etc. of the box by adding different parameters, which can all be found in the link to the documentation Rik provided you. You should have a look at http://fancybox.net/api

If you for instance want to switch the transitionin and transitionout effect from 'fade', which is default, to 'elastic you can do it by writing this:

$(".gallery").fancybox({
        'transitionIn':'elastic',
        'transitionOut':'elastic'
});

Hope this helps

/Jan

On second thoughts, I'm beginning to think that it is the

<xsl:attribute name= "class">fancybox galleryxsl:attribute>

thta is the problem and that I have missed something that this is pointing to?

Edit......@ Jan - Hadn't seen your post when I posted this -- trying out your suggestions :)

OK -- I apreciate the efforts to help guys.

I obviously cannot get to grips with the relationships between the js scripts, the xslt files  the various documents in which they are used and the way in which information is passed betwen them. I was hoping that with a bit of experimentation it would work and the secrets would be revealed!

I obviously need to learn some basics first -- I'll take a look at Umbraco TV and see if there is anything to help me.

I'll also see what I can find on Java - I'm not very good at learning simply by reading books these days so I need something like the books on asp.net by Imar Spaanjaars that have lots of excercises and walked through 'try it outs'  -- maybe he'll have something but at 23:30 I think I'll leave it till tomorrow to take a look!!!

Maybe you should just try to make a simple example without rendering the XSLT macro. I think that may be what confuses you right now.

Try making a static example in your template for instance. Once you got that working, move on to build the XSLT maco. It's really just a mater of the html output, once you've got the grasp of the simple example.

For instance - try writing this (I've left out some elements and the doctype because i'm lazy - just so you are aware)

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

$(document).ready(function() {
    $("a.group").fancybox({
        'transitionIn':'elastic',
        'transitionOut':'elastic',
        'speedIn':600,
        'speedOut':200,
        'overlayShow':false
    });
});

</head>
<body>
<ul>
<li><a class="group" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></li>
<li><a class="group" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></li>
</ul>
</body>
</html>

Make sure that the paths to your script,css and image files are correct - then this should work for you.

And please don't confuse JavaScript with Java - big difference ;-)

I hope a good nights sleep helps.

/Jan

is working on a reply...