Sliding Panel Photo Wall Gallery (Released 12/3/2011)

[smartmedia]

Version 1.0.0.0
Build with 2.6.0 Extension builder

More info about the Gallery:
http://tympanus.net/codrops/2010/05/14/ ... th-jquery/



Properties


Futures
Added ability to include image as background to thumb list ( if no image, color will show up )
Added ability to include image as background to image view panel ( if no image, color will show up )
Added ability to change back & next buttons with transparent image. ( Included some, otherwise make your own )
Thumbnails are generated automatically ( You can change the width - height - folder name - prefix or thumbs )
Since this Gallery is fully paged Return link added to return back to your page, also you can change the text.
You can change the color of info bar according your needs.

Download
http://dl.dropbox.com/u/8766047/Sliding ... allery.rar

[BaconFries]

This is untested but it should work as I have used in similar extensions, when using the xsl in the builder please use Type:Gallery make the Variable: $images$ and insert as shown below in the HTML you will also need to make Varibles for the Height and Width and you will just use one Image for both the Thumbnail and Large... as mentioned I havnt tested this for the script you need the xsl for but it should work...

The HTML

Code: Select all

<div id="thumbsWrapper">  
<div id="content" >
$images$ 
<div class="placeholder"></div>  
</div>  

The XSL

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match='/'>
<xsl:for-each select="GALLERY/IMAGE">
<img src="{FILENAME}" height="{HEIGHT}" width="{WIDTH}" alt="{FILENAME}" title="{TITLE}" /></a>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

[smartmedia]

Thanks man, i did it with small changes.

Code: Select all

<img src="{THUMB}" width="{THUMB_WIDTH}" height="{THUMB_HEIGHT}" alt="{FILENAME}" title="{TITLE}" />

[protectourlands]

Looking forward to this one.

[smartmedia]

Hi..
BF, do you know how i will center the thumbs in page, right now start from left and because the user can change the width and height of thumbs doesn't look so good, they leave some space empty in right.

[BaconFries]

I would need to take a look at the css it will probably be something in there...or maybe try this

Code: Select all

<img src="{THUMB}" width="{THUMB_WIDTH}px" height="{THUMB_HEIGHT}" px alt="{FILENAME}" title="{TITLE}" />

or

Code: Select all

<img src="{THUMB}" width="100%" height="100%" alt="{FILENAME}" title="{TITLE}" />

[smartmedia]

Thanks BF, i found the solution.
I just put text-align:center; in #content img class and it's done.

[CJS]

smartmedia,
This will make a great addition to the WB extension library. I look forward making use of your good work.
Thanks.

[smartmedia]

Extension is released. Download and enjoy it.

[smartmedia]

Well,
In order to show a different image set for back and next, you must create it with a program like this:
nav.png


nav2.png


Those are the file are used embedded and they are image set, width must be 40px and height 80px. So, both back & next images are 1 file. I hope you understand.
Personally i use RealDraw 5.

[smartmedia]

Please, re download the extension, i have included some nav icons for back and next images.

[amrajadhyaksha]

Good work as always.
My request is about a good accordion. Codrops has a few of these, eg:
http://tympanus.net/Tutorials/ElegantAccordion/
http://www.armagost.com/zaccordion/

WWB has an accordion but it has size restrictions. Would be great to have a full page or at least full legth one.
Thanks, in anticipation.
And oh yes, thanks again for the zooms.

[stamjoe]

Perfect Chris.
Thanks
Joe

[me.prosenjeet]

Was trying this gallery. Seems Super!

However, one issue. After adding the images, moment I save the project, the default navigation buttons change and point to another image*. I tried selecting the buttons that come with this extension and save again but still when I reopen the project, the image set is gone and another image* is set as button.

Any idea?