Ebony Theme

Hello,

I've developed a new theme "Ebony" for personal use. It's based on Carbon theme.

Here are a few of screenshots.

Album page:

[img]http://www.tuwang.org/images/ebony-album.jpg[/img]

Photo Page

[img]http://www.tuwang.org/images/ebony-photo.jpg[/img]

Lightbox

[img]http://www.tuwang.org/images/ebony-lightbox.jpg[/img]

Sliding Sidebar

[img]http://www.tuwang.org/images/ebony-sidebar.jpg[/img]

Ebony Theme Main features:

1. Javascript Effects.

1) Thumbnail Reflection.
It likes Mac Gallery. Using this Js reflection effects you dont need to use imageframe.

2) Lightbox using mootool javascript library.
It's not famous prototype lightbox. It's a mootools lightbox, which is smaller and better than prototype's. The js file plus mootools lib file is about 54KB in total, the prototype lightbox is about 104KB. Also, using this lightbox you can click the thumbnail don't need to wait the page loading completely.

3) Sliding Sidebar
A new Js file for mootools.

2. Seach engine friendly.

1). Page title changed to like this:
Gallery - Album - SubAlbum - Photo Name

2). Use h2, h3 tag in Photo name and link to photo page.

Theme Demo

http://www.tuwang.org
NOTE:
The demo site has about 10k visitors and 100k PVs per day. For reducing server resource and bandwidth usage, I've temporarily removed reflection and lightbox features from the demo site. If your site is a personal site, has NO too many visitors(less than 5000/day), or you don't care some bandwidth usage, I strongly suggest you use those cool features.

To view a full feature demo site, you can also Google "ebony theme by Jesse Lee", you'll find there are many sites using Ebony theme.
Here is several I found from google search:
http://chewyart.com/gallery2/v/3dgallery/
http://www.esp.co.za/gallery2/main.php
http://gallery.sam0r.co.uk/main.php
[2008-04-08, Jesse]

Browser Compatible:

Ebony is compatible and fully tested with IE 7, Firefox 2.0+, Opera 9.0+ and Safari 3.0+. It doesn't work very well with IE6. There is a Js(PNG) problem and a css problem. It's not very difficult to fix them. But I've been recently a bit busy. So currently I have no plan to do this. IE6 sucks.

Gallery Compatible:

Ebony is compatible with Gallery 2.2.4. It maybe work with other 2.x versions, but not tested, not sure.

Theme Download

There are three versions you can choose one.

1. English Version:
http://www.tuwang.org/files/Ebony_English.tar.bz2

2. Chinese Simplified:
http://www.tuwang.org/files/Ebony_Simplified_Chinese.tar.bz2

3. Chinese Traditional:
Please download Chinese simplified version above. Then download the icon set here:
http://www.tuwang.org/files/buttons.png
Use this png file to replace ebony/images/buttons.png file.

Installation

* After unbz2 the file, you'll see there are two folders: themes and modules. The themes folder contains main Ebony theme, just upload it to your gallery theme folder. Modules folder contains some module templates. If you use those modules, you can upload them to your gallery's corresponding module folder.

* The PSD files of logo and buttons included.

* Change the ad banner on the top.
Just edit /ebony/templates/ads.tpl, change the image file to yours. If you don't want it, just remove the div content.

Next Release

1. Remove all tables, fully div + CSS structure.
2. Add more Js effects. (e.g., change the background color of photo page, Sliding MicroThumbnail View)
3. Remove unnecessary div tag in .tpl file.
4. Make CSS file more clear.

Bugs, problem, question please reply here or on my blog: http://www.zzvo.com/story/ebony-gallery2-theme/

** Please don't remove the credit message in the theme footer**

Hope you like it.

Je55e(Jesse Lee)
http://www.zzvo.com/
http://www.tuwang.org/

Looks pretty good to me, will try it out this week

I like how you implemented the details into the lightbox view, that really cool.
The search engine is great but I nelieve i would have highlited it instead of placing it into the sidebar... probly instead of your banner at the top
Keep up the good work!

@GuillaumeB
It needs Dynamic Album Plugin, and enable url rewrite.
http://www.zzvo.com/
http://gallery.zzvo.com/

how to remove thumbnail refelections
in researching this I discovered that the reflection is JS based
each time i try to modify the code below i am able to remove the reflection but i also kill the lightbox popup

reflection.js for mootools v1.2
by Christophe Beyls (http://www.digitalia.be) - MIT-style license
Hacked By Jesse Lee (www.zzvo.com), 2008.2.20*/

var Reflection = {

add: function(img, options){
img = $(img);
if (img.getTag() != 'img') return;
options = {arguments: [img, options]};
if (window.ie) options.delay = 50;
img.preload = new Image();
img.preload.onload = Reflection.reflect.create(options);
img.preload.src = img.src;
},

remove: function(img){
img = $(img);
if (img.preload) img.preload.onload = null;
if ((img.getTag() == 'img') && (img.className == 'reflected')){
img.className = img.parentNode.className;
img.style.cssText = img.backupStyle;
img.parentNode.replaceWith(img);
}
},

reflect: function(img, options){
options = $extend({
height: 0.20, // 20%
opacity: 0.30 // 30%
}, options || {});

Reflection.remove(img);
var canvas, canvasHeight = Math.floor(img.height*options.height);
// Hacked, Jesse, 2008.2.20

thank you sir

that did the trick

how do I remove the bar that says:

"Title"
"This is the main page of your Gallery"
"(x# items total)"

I like this theme but would prefer to eliminate this bar, thanks!

Ok I tried editing the dimensions of the picture in the theme.tpl, but now the banner just overlaps the gallery part of the layout.

@s3admin
also need to change css:
#logo{float:left; width:200px; height:50px; margin:10px 0 0 8px}
----
http://www.zzvo.com/
http://gallery.zzvo.com/

Also image watermarking does not seem to work with using the lightbox...

Loooove this theme! Thanks for the work you've put in..
Quick question for you.. is there an easy way to "lock" the sidebar so it is always open by default???

Thanks in advance

Neil

And no hiden properties file? Help me!

First of all : congratulations ! You built the theme I have been dreaming of for months. Great work.
Now I am in the process of using the many properties to get a "look and feel" of my own and I have one question :
I can not figure out how I can make appear the description of the picture. It does appear if I use the slideshow, but I didn't find the way to get it on the picture page where only the details are shown.
Any clue ?
Thanks.

edit photo.tpl, find:
<div class="gsContentDetail">
{if !empty($theme.item.title)}
<div class="gbBlock">
<h2> {$theme.item.title|markup} </h2>
</div>

after code above, add:
{if !empty($theme.item.description)}
<p class="giDescription">{$theme.item.description|markup}</p>
{/if}
----
http://www.zzvo.com/
http://gallery.zzvo.com/

As yesterday, after having looked for a solution by myself without any success, I need to come back to you for some questions :
- how can I change the "Details/Comments" of the popup window ?
- how can I remove the picture details (EXIF info) in the photo page ?
Thanks.

Jesse, thanks for the great theme. I am wondering how hard would it be to make a few changes. If you could point me in the right direction on these I would appreciate it. I am new to playing with themes so I am not sure where to start.

1. Is there anyway to add a previous and next button on the image in the lightbox when you mouse over it? Siriux_ijonized theme has something like that and it is really nice

2. Siriux_ijonized theme also has the ability to click anywhere on the left hand side of the image to go to the previous image and anywhere on the right side of the image to go to the next one

3. The hybrid theme automatically resizes the image based on the window size of your web browser. I am setting up gallery right now to host a bunch of our wedding pictures and want to make it as easy as possible for our family that is not the most technical of folks to view the pictures as large as their screen can support

Any pointers are appreciate and thanks again for the great theme.

-Chris

@chicken12
Question 1 & 2. Currently, the ebony lightbox doesn't support those features. They need to change Js file.
3. I didn't see hybid theme's code, So not sure how it does this job.
----
My Blog: http://www.zzvo.com/
Ebony Gallery2 theme demo: http://www.tuwang.org/

I understood what was the problem : actually the picture uploaded was 1 Mo big and by removing it, it solves the problem.
Nevertheless if someone can tell me WHY this was a problem, I am interested...

Jesse, by the way, how do you remove the "newest photos" and "most viewed photos" links of the sidebar ?

s3admin

Dunno if you solved the logo problem yet, but in the theme.css change the height in this...

#gsHeader {
width: 100%;
height: 90px;
}

So far, Ebony is my favorite theme and the one I'm using as my baseline...awesome job!

Best theme I've found!

Is it possible to remove the image title from the thumbnail display. The title for all my images are defaulted from those stored on my computer which were directly from my camer (ie 100_1047.JPG), I don't really want to edit all the image titles so I'm hoping you can advise what I need to edit/remove

I am running the Spikesource Windows 2008 install of Gallery 2. When I copy in the ebony theme, it does not show up. I am certain I am missing something simple. I've been able to copy in other themes without a problem. Thanks.

Ok i managed to install the theme but its not showing up on the home page .its active in the admin panel and the login screen but not on the home page. what is the problem??

http://www.techjunkiez.com http://www.techjunkiez.in

Solved !
It seems that the theme didn't like the short adress /favicon.ico. After putting the full one (themes/ebony/images/favicon.ico) it works !
Hope it will help other folks.

Where can I see an implementation of the lightbox effect? Sites I have been to don't have any such language about this.

tx

Firstly may I thank Je55e for a fabulous interface, it's the best I have seen. Thank you so much!
I have adapted the theme in many ways but wish to eliminate the Lightbox.
I want to click on a thumbnail in an album so that it behaves like the carbon theme, and goes to the larger image with the thumbnails on the right hand side. I've tried hard to find the solution but am finding it difficult to get a work around. (Locating the code for calling up the lightbox).
Can anyone point me in the right direction or have the solution?