Author Topic: Lightbox slide and thumbnail show.  (Read 3788 times)

DrDOS

  • Guest
Lightbox slide and thumbnail show.
« on: June 15, 2009, 10:32:17 PM »
Another easy to use script, this time for putting together a show with the popular Lightbox Javascript software. You can get the software here:

http://www.huddletogether.com/projects/lightbox2/

The download link is at the top of the Download page. Enable "Show Hidden Files" and make a new folder named .lightbox, note the dot. Then extract the Lightbox files into that folder. They will be called from it. Also name this script "lightshow" and place it in the folder.

To use it just open a terminal in a folder with images, enter:

bash $HOME/.lightbox/lightshow "The name you want for your webpage"

Example: bash $HOME/.lightbox/lightshow our_boat_trip

This will produce a page called our_boat_trip.html.

I hope you guys appreciate this. I rewrote it twice, first I used sed for editing a made page, but it was having some trouble so I rewrote it almost completely in bash then had to do a couple of quick changes to correct another problem with sed.

Code: [Select]
#!/bin/sh
IFS=$'\t\n'
mkdir thumbs
cp  *.jpg *.jpeg *.JPG *.JPEG  thumbs
cd thumbs
mogrify -geometry 160x160 *.*
echo "Your thumbnail folder is populated"
cd ../
echo -E \
"<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
  <meta content=\"text/html; charset=ISO-8859-1\" http-equiv=\"content-type\">
<title>LightBox</title>" > $1.html
sleep 1
echo -E \
"<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/prototype.js\"></script>
<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/scriptaculous.js?load=effects,builder\"></script>
<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/lightbox.js\"></script>
<link rel=\"stylesheet\" href=\"$HOME/.lightbox/css/lightbox.css\" type=\"text/css\" media=\"screen\">" >> $1.html
sleep 1
echo -E \
"<style type='text/css'>
body {background-color:#960}
td {vertical-align:middle}
img  {border:0px}
</style>
<script type=\"text/javascript\">
imglist=Array();imglist=[" >> $1.html
sleep 1
dir -1 -Q *.jpg *.jpeg *.JPG *.JPEG > temp.txt
sed -i '1,$s/$/,/g;$s/.$/\];/' temp.txt
sed -i '/imglist=Array()\;imglist=\[/r temp.txt' $1.html
sleep 1
rm temp.txt
echo -E \
"
var imgcount = imglist.length;var htmlblock = \"\";for (x=0; x <= imgcount - 1; x++){y = x + 1;
var htmlblock = htmlblock + \"\n\n<span><a href='\" + imglist[x] + \"' rel='lightbox[]' title='\" + imglist[x] + \"'><img src='thumbs/\" + imglist[x] + \"'></a></span>\";
}
document.open();document.write(\"<table width='660' height='100%' align='center' ><tbody><tr><td>\" + htmlblock + \"</td></tr></tbody></table>\");document.close();
</script></head>
<body></body></html>" >> $1.html
firefox $1.html
exit

# Usage: bash $HOME/.lightbox/lightshow "Name of you web page"
# Example: bash $HOME/.lightbox/lightshow My_New_Car

Here's another one that uses lightbox. It works from an image map. It can make many pages in one session and works well for larger collections. Put it in the .lightbox folder and name it maplightshow.

Code: [Select]
#!/bin/sh
IFS=$'\t\n'
mkdir New
cp *.jpg *.JPG *.jpeg *.JPEG New
cd New
# Uncomment the lines below if you want to rename the files. You will need to enter the file name as the fourth item.
#cnt=100
#for i in ./*.jpg; do
#let cnt=cnt+1
#mv $i $4$cnt.jpg
#done
montage -adjoin -border 1 -geometry $1 -background '#000' -tile $2 *.jpg *.JPG *.jpeg *.JPEG $3.html
mogrify -transparent '#000' *.gif
sed -i '1s!<html version="2.0">!<\!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"><html>!' *.html
sed -i '2s!<head>!<head><meta content=\"text/html; charset=ISO-8859-1\" http-equiv=\"content-type\">!' *.html
echo -E \
"<style type='text/css'>
body {background-color:#000;color:#fff}
td {vertical-align:middle}
img  {border:1px solid white}
</style>
<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/prototype.js\"></script>
<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/scriptaculous.js?load=effects,builder\"></script>
<script type=\"text/javascript\" src=\"$HOME/.lightbox/js/lightbox.js\"></script>
<link rel=\"stylesheet\" href=\"$HOME/.lightbox/css/lightbox.css\" type=\"text/css\" media=\"screen\">" > top.txt
sed -i '1,$s/h1>/h3>/g' *.html
sed -i '/<title>'$3'<\/title>/r top.txt' *.html
sed -i '/<title>'$3'-[0-9]<\/title>/r top.txt' *.html
sed -i '/<title>'$3'-[0-9][0-9]<\/title>/r top.txt' *.html
sed -i '20,$s/[^"]*"\([^"]*\)"[^"]*/<a href=\"\1\" title=\"\1\" rel=\"lightbox\[\]\" shape=\"rect\" coords=/'  *.html
rm top.txt *.shtml
firefox $3.html $3-0.html

# Usage: bash $HOME/.lightbox/mapligthshow "size of thumbnails" "columns and rows" "HTML page name"
# Example bash $HOME/.lightbox/mapligthshow 100x100 6x4 "My Picture Page"
# If you uncomment the file renamer enter the file name as a fourth item.
# If you want to change the page color change all three entries, the two background colors and the transparent, to avoid conflicts.



« Last Edit: June 16, 2009, 06:37:06 PM by DrDOS »