sterile + highslide

bigjimmy

I modified the plain sterile theme and combine with highslide js.
check out the result at:

http://www.ceciliayou.com/photos/

sbillard

Nice.

Did you modify the sterile theme from the WIKI? We have replaced that theme in the Community build with an option to the default theme and a CSS for the sterile look and feel. We would be interested in your changes if you apply them to default. You might consider making hte highslide an option.

If that's too much for you, please do the modification so that the old image click code is commented out and the new clearly identified. Then one of us will put in the optin.

bigjimmy

I'm not sure I know how to follow your steps, but here is what I did:

I first added the following code into the head of the album.php of the default sterile theme that came with the zp.zip

<script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide.js"></script>

<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages();
}
</script>

then I replace the following code:

<div class="image">
<div class="imagethumb">" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div>
</div>

with

<div id="highslide-container"></div>

<div class="image">

<div class="imagethumb">" class="highslide" onclick="return hs.expand(this)" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div>
</div>

Copy the highslide folder from the highslide theme
Then I just play around with the CSS file to make it match my blog theme.
That's It! Hope this helps

bigjimmy

I upload the theme on my website with updated version of highslide with caption control:

http://www.ceciliayou.com/photos/sterile-highslide.rar

someone please install it and see if it works

thanks

jayray999

Excellent++.

A theme that uses all the space available in the browser window but no more to display the selected photo.

No scrolling required to view the bottom half of the selected photo (a common problem plaguing many Zenphoto themes) unless you maximize the photo to its actual size.

Maximization is only a click away.

Theme is equally effective in portrait mode.

Very fast compared to many others.

Intutive. I don't expect anyone to hunt for buttons.

Possible bug
In Safari (OS X), photos within a subalbum show up in a single column, not an nx5 matrix. But this is hardly a big deal and possibly something Safari does weirdly.

Questions for Jimmy

1. Any simple way to dim the background to offer greater contrast to the chosen photo?

2. Do you expect it will be compatible with Zenphoto 1.1 without modification?

I think this one is worthy of being part of the official release.

Congratulations.

jayray999

Tried this with ZP 1.1 soon after Tris announced the release. It just works! The admin drop-down options menu is of course missing but that is no biggie.

bigjimmy

jayray999:
Thank you for your comment.
Regarding your question.
I believe you are talking about the lightbox script, which allows the background the dim when photo is popup. I don’t believe highslide contains such option.
Maybe a combination of sterile + lightbox will be the solution to your question. (which somehow I always run problems into lightbox and IE)

aitf311

To get the Admin Toolbox to display in any theme just use this: <?php printAdminToolbox(); ?>

And then theme it! Drop this in your css file for sterile+highslide,

`

#admin, #admin_data{

position:fixed;

right:0;

top:0;

border-left: 1px solid #CCC;

border-bottom: 1px solid #CCC;

background: #fff;

width:120px;

}

#admin_data{

top:16px;

}

#admin h3 {

font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

color: #666;

border-bottom: 1px dashed #CCC;

margin:0;

padding:0;

}

`

jayray999

@bigjimmy: Thanks for responding. I know Lightbox and use it (ChiliLight). I also just saw your excellent implementation with Lightbox in the other thread but my question was whether highslide.js can do the dimming effect. Probably will need a hack to modify highslide.js. Oh well...

@aif311: Thanks. Will try this soon.

jayray999

Inspired by @bigjimmy and some code I found at the HighSlide JS forum I further hacked up things to produce the effect I wanted. See:

http://www.jayantray.com/zenphoto/

This is my Zenphoto 1.1 test site.



The hack


Begin by using @bigjimmy's theme. Make sure it works for you. Then make the following changes:

1. Add the following code at the very end of /themes/sterile-highslide/highslide/highslide.js

`// this function puts the dark screen over the entire page

function DarkenPage()

{

var page_screen = document.getElementById('page_screen');

page_screen.style.height = document.body.parentNode.scrollHeight + 'px';

page_screen.style.display = 'block';

}

// this function removes the dark screen and the page is light again

function LightenPage()

{

var page_screen = document.getElementById('page_screen');

page_screen.style.display = 'none';

}`

2. Make yet another change to /themes/sterile-highslide/highslide/highslide.js

Find the following line in highslide.js:

`HsExpander.prototype.changeSize = function(dir, x1, y1, w1, h1, x2, y2, w2, h2, dur, steps, oo1, oo2) {`

Right after that add the following lines of code:

`if (dir == 1) DarkenPage();

else LightenPage();`

Note that the added code goes in after the open brace

3. Add the following section to /themes/sterile-highslide/zen.css:

`#page_screen

{

background-color:#000000;

filter:alpha(opacity=80);

opacity: 0.8;

position:absolute;

top:0px;

left:0px;

width:100%;

display:none;

}`

4. Lastly, add the following code at the beginning of the `` section of the /themes/sterile-highslide/album.php:

`

 

`

Thats it. Adjust opacity to desired levels and enjoy. I reduced mine to 0.6.

I make no claims to originality. I used what I found over at the Highslide forums and modified it for the Zenphoto schema. Now I have exactly the effect I had in mind.

For the legally minded, highslide.js is not free for commercial use. A single domain license is $29 which is pretty fair.

But it goes to show what a great project Zenphoto is.

jayray999

@ait311

I tried adding the admin dropbox. Made the zen.css change and added `<?php printAdminToolbox(); ?>` to the end of the <body> section of index.php and album.php.

It shows up but nothing else as both index.php and album.php pages go blank. And I get this error.

`Fatal error: Call to undefined function queryencode() in /home/..../zenphoto/zp-core/template-functions.php on line 80`

Note: The dots above are to conceal my server path.

aitf311

This was an error early on, you will need to download the latest SVN or use the nightly build: http://www.zenphoto.org/files/nightly

jayray999

Thanks, everything works. Sorry for not trying basic things before posting.

acrylian

The theme is nice but not working correct in Safari 2.0.4 and in Opera 9.24. All thumbs are shown under each other in one long column instead of in rows. Everything else is fine.

acrylian

Just to mention it:
It should explicitly be noted that the highslide js is only free for non-commercial sites and so this is for the theme using it, too.
This is very important because zenphoto itself is free for everything.

jayray999

@acrylian: If you look closely I did mention both points you make (Safari bug and highslide license) in the passing. But I agree it is important to highlight these facts in case someone wants to use the theme as it stands. Thanks.

@bigjimmy and everyone else: Any thoughts about the Safari (plus Opera) bug that @acrylian mentions?

acrylian

@Jayray999: I indeed didn't read carefully enough. You did mention the licence! I just took a look at the demo the highslide site. Sorry for that!

What I meant, too, is that the licence is not included with the above link.

According the Safari/Opera Bug, I took a quick look:
Just modify the following css part:
`

#images {

float: left;

clear: left;

}

`
Delete the float: left; then it works in both Safari and Opera.

jayray999

@acrylian: Thanks, it works. Test site updated.