Jalbum

July 14, 2012 newer version is here.

I’ve been using Jalbum for a while now. It’s a great software to display images with pop-ups. This time, I would like to show how I used the Jalbum on our website.

Jalbum website

There are many skins/plugins for jalbum, the one I use the most are lightbox2(no longer available) and matrix.

Well, let’s… … start with an image folder, open jalbum, don’t maximize it, have room to click and drag the image folder to the working area, very simple.

add

All the pictures will show up in the working folder, now we can choose the skin that we want to use, I use lightbox2, select it and configure it.

select

lightbox

At the lightbox2 setting button, it will go into album info tap

album information

lightbox 2 settings tap information will show how the lightbox 2 displays. We use grow_transparent, check start slideshow automatically @ 5 secs

lightbox settings-check slideshow

Next tab is pagination, uncheck the enable pagination, will show as many columns as we decide, we can set how easing effect will come out.

nopagination

pagination-check or uncheck-columns display

Color setting tab, we can change the background color gray to any color we want.

color settings-change background color

Filters tab, we can put watermark here.

Filters-set watermark

The next important settings is the images, we can re-scale the images to save space on the webserver. We use 1280×720 because our images are 16×9 and 1280 resolution is the best view for web browsers at this time. The thumbnails is set @ 124px. If we set the JPEG quality is 100%, it will be the same as the original, the files will be big even with scaled-down. We would set to about 90% instead of default at 75%.

images settings-re-size images-thumbnails

The next one is Pages, we can set to link to scaled-down images or copy the original size to the webserver.

Pages-Scaled-down images

Now we’re ready to create a webserver jalbum folder with lightbox 2 pop ups. Just click Make Jalbum and the process will begin.

processing jalbum

When everything is done, a dialog will come up and we can preview our album on our default browser.

finish-preview

The preview of our album

Preview of our album

lightbox 2 in action with auto slideshow

We can upload our album to Jalbum website or if we want to change some colors or settings, we can just close the box and start the setting all over again. If we’re happy with the display, just close the box and go to the images folder, there will be an “album” folder created there, and this folder is the one we will upload to our webserver. We can rename it, add music to the slideshow.

album folder is created

We renamed the album to a specific name.

rename the album

To add dewplayer and music to the slideshow for people to enjoy pictures and sound. Open the folder, inside it will have an index.html, this is the one we will need to modify. We use notepad++ to edit.

index.html need to edit to add music

It is important that for all browsers to play dewplayer, the object codes must be in the begining of the <body> and before <div id=”imageContainer”>. All the dewplayer.swf path and mp3 file must be correct. For the ie8 problem child we need to add between the <head></head> of the index.html

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″/>

Dewplayer setup: make sure the path to dewplayer.swf and mysong.mp3 is correct or it won’t play.

<body><script type=”text/javascript”>
breadcrumbs()
</script>
<p align=”center”>
<object id=”dewplayer” width=”200″ height=”20″ type=”application/x-shockwave-flash” data=”dewplayer.swf?mp3=mysong.mp3&amp;autostart=1&amp;autoreplay=1″ name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf?mp3=mysong.mp3&amp;autostart=1&amp;autoreplay=1″ />
<param name=”wmode” value=”transparent” />
</object>
</p>

When everything is done, re-save and try to open this modified “index.html” to make sure it works with all browsers.

Zip the whole folder and upload to our website (webserver)

zip folder to upload to webserver

For InmotionHosting.com server, log-into the control panel, navigate to the folder we want to upload the zip file to. Browse to the zip file and upload, this one let us to upload 1000Mb maximum, if the zip file is bigger, we need to use ftp to upload. That’s why we use the option of scaled-down and no-original when we generate the jalbum.

upload the zip file

Extract the zip file

extract the zip file

extract zip file to folder

extracted folder

Now we have our folder on our website (webserver). Notice the url of the folder. Just use any browsers and type in the url of our folder and the jalbum will begin.

our url of our jalbum

we even put it into another overlay (pop-up) like fancybox like this

our url of our jalbum in fancybox blue

So, if you like the jalbum, like me, we should donate since it helps to make our website to display better free.

Cheers,

idog

Leave a Reply

Your email address will not be published. Required fields are marked *