Sliding Panel Photo Wall Gallery (Released 12/3/2011)
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Sliding Panel Photo Wall Gallery (Released 12/3/2011)
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
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
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>
<script type="text/javascript">jQuery.noConflict();</script>
- BaconFries
-
- Posts: 5328
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Sliding Panel Photo Wall Gallery (Working)
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
The XSL
The HTML
Code: Select all
<div id="thumbsWrapper">
<div id="content" >
$images$
<div class="placeholder"></div>
</div>
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>
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Working)
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>
<script type="text/javascript">jQuery.noConflict();</script>
- protectourlands
-
- Posts: 443
- Joined: Sat May 24, 2008 2:16 am
- Contact:
Re: Sliding Panel Photo Wall Gallery (Working)
Looking forward to this one.
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Working)
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.
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>
<script type="text/javascript">jQuery.noConflict();</script>
- BaconFries
-
- Posts: 5328
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Sliding Panel Photo Wall Gallery (Working)
I would need to take a look at the css it will probably be something in there...or maybe try this
or
Code: Select all
<img src="{THUMB}" width="{THUMB_WIDTH}px" height="{THUMB_HEIGHT}" px alt="{FILENAME}" title="{TITLE}" />
Code: Select all
<img src="{THUMB}" width="100%" height="100%" alt="{FILENAME}" title="{TITLE}" />
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Working)
Thanks BF, i found the solution.
I just put text-align:center; in #content img class and it's done.
I just put text-align:center; in #content img class and it's done.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
Re: Sliding Panel Photo Wall Gallery (Working)
smartmedia,
This will make a great addition to the WB extension library. I look forward making use of your good work.
Thanks.
This will make a great addition to the WB extension library. I look forward making use of your good work.
Thanks.
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Released 12/3/2011)
Extension is released. Download and enjoy it.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Released 12/3/2011)
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.
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.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Sliding Panel Photo Wall Gallery (Released 12/3/2011)
Please, re download the extension, i have included some nav icons for back and next images.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
- amrajadhyaksha
-
- Posts: 157
- Joined: Thu Apr 09, 2009 2:26 am
- Location: mumbai
- Contact:
Re: Sliding Panel Photo Wall Gallery (Released 12/3/2011)
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.
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.
Re: Sliding Panel Photo Wall Gallery (Released 12/3/2011)
Perfect Chris.
Thanks
Joe
Thanks
Joe
- 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)
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?
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
Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com