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 are already more than 250 extensions available!
Post Reply
smartmedia
 
 
Posts: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia » Fri Mar 11, 2011 4:55 pm

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: 4010
Joined: Thu Aug 16, 2007 7:32 pm

Re: Sliding Panel Photo Wall Gallery (Working)

Post by BaconFries » Fri Mar 11, 2011 6:04 pm

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: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by smartmedia » Fri Mar 11, 2011 8:57 pm

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: 663
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Sliding Panel Photo Wall Gallery (Working)

Post by protectourlands » Fri Mar 11, 2011 11:17 pm

Looking forward to this one.

smartmedia
 
 
Posts: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by smartmedia » Sat Mar 12, 2011 10:51 am

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: 4010
Joined: Thu Aug 16, 2007 7:32 pm

Re: Sliding Panel Photo Wall Gallery (Working)

Post by BaconFries » Sat Mar 12, 2011 2:41 pm

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: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Sliding Panel Photo Wall Gallery (Working)

Post by smartmedia » Sat Mar 12, 2011 3:55 pm

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: 27
Joined: Sat Jan 09, 2010 3:10 am

Re: Sliding Panel Photo Wall Gallery (Working)

Post by CJS » Sat Mar 12, 2011 8:01 pm

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

smartmedia
 
 
Posts: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia » Sun Mar 13, 2011 6:45 am

Extension is released. Download and enjoy it.
infogate
<script type="text/javascript">jQuery.noConflict();</script>

smartmedia
 
 
Posts: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia » Sun Mar 13, 2011 10:43 am

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: 68
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

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

Post by smartmedia » Sun Mar 13, 2011 11:36 am

Please, re download the extension, i have included some nav icons for back and next images.
infogate
<script type="text/javascript">jQuery.noConflict();</script>

sailor1978
 
 
Posts: 41
Joined: Mon Oct 20, 2008 8:56 pm

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

Post by sailor1978 » Mon Mar 14, 2011 4:10 pm

:-)

User avatar
amrajadhyaksha
 
 
Posts: 162
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

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

Post by amrajadhyaksha » Tue Mar 15, 2011 3:32 am

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: 246
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

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

Post by stamjoe » Thu Mar 17, 2011 4:00 pm

Perfect Chris.
Thanks
Joe

User avatar
me.prosenjeet
 
 
Posts: 1245
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 » Sun Mar 18, 2012 4:52 pm

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?

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests