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

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
smartmedia
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by 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/

Image

Properties
Image

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
Last edited by smartmedia on Sat Mar 12, 2011 9:59 pm, edited 2 times in total.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Sliding Panel Photo Wall Gallery (Working)

Post by 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
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by 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}" />
infogate
<script type="text/javascript">jQuery.noConflict();</script>
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Sliding Panel Photo Wall Gallery (Working)

Post by protectourlands »

Looking forward to this one.
smartmedia
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by 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.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Sliding Panel Photo Wall Gallery (Working)

Post by 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
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by smartmedia »

Thanks BF, i found the solution.
I just put text-align:center; in #content img class and it's done.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
CJS
 
 
Posts: 19
Joined: Sat Jan 09, 2010 3:10 am

Re: Sliding Panel Photo Wall Gallery (Working)

Post by CJS »

smartmedia,
This will make a great addition to the WB extension library. I look forward making use of your good work.
Thanks.
smartmedia
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia »

Extension is released. Download and enjoy it.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
smartmedia
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by 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
Image

nav2.png
Image

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.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
smartmedia
 
 
Posts: 66
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia »

Please, re download the extension, i have included some nav icons for back and next images.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
User avatar
amrajadhyaksha
 
 
Posts: 157
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

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

Post by 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.
User avatar
stamjoe
 
 
Posts: 230
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

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

Post by stamjoe »

Perfect Chris.
Thanks
Joe
User avatar
me.prosenjeet
 
 
Posts: 1265
Joined: Mon Dec 24, 2007 1:50 pm
Location: Lucknow
Contact:

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

Post by 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?
Check the new Chat GPT and Malware detect extensions at the link below

Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
Post Reply