The El Book-o Stack is designed to display a series of images in the flipping pages of a book in either a horizontal or vertical orientation. The El Book-o Stack is easy to use. El Book-o is actually two stacks, one for the horizontal book and one for the vertical book.

These instructions assume that you’ve installed the El Book-o Stacks and snippet in RapidWeaver.

Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with this set of instructions. You can look at the finished product there.

When you first add an El Book-o stack to your RapidWeaver page, you should see this (Image 1):

El Book-o requires that you add the path to your images into the area shown in Image 1. When you click on the area displaying the code, it becomes active and displays a blue border around it as shown in Image 2.

The Stack’s HTML includes the path to some low resolution images on my server that you can view in Preview mode. Go ahead and look, you know you want to. You will want to replace the code with the path to your images. The format for each image looks like this:
"http://www.shukapaw.com/book_images/Bryce-5.jpg","#",
I’ve highlighted some of that code in different colors so I can better explain. The part in red is the absolute path to the image warehoused on my server.. It is of the format:
http://www.shukapaw.com/book_images/Bryce-5.jpg

You will want to replace the path to each image with the path to your images. They can be of this format or they can be relative paths to images you have added to your page in the “Page Inspector’s assets” field. If you have the images in the assets of the page, your path would be something like this: assets/Bryce-5.jpg You would replace everything between the first pair of quotation marks on each line with the path to your images like this: "assets/Bryce-5.jpg","#",

Advanced users: You can also replace the # with a link. Let’s assume you wanted the first image to link to Yahoo. You would change the code to:
"http://www.shukapaw.com/book_images/Bryce-5.jpg","http://www.yahoo.com",

My personal opinion is that this is best used as a booklet only (no links)... but that is ultimately up to you.

You can see that the included HTML contains 5 images. You can have more or less by adding additional lines or deleting lines. YOU MUST MAKE SURE THAT THERE IS NO COMMA AFTER THE FINAL IMAGE LINE IN THE CODE . The maximum width and height of an image displayed in El Book-o is 300px x 300px. El Book-o will scale down your images for you but this is not good practice and it takes longer for pages to load for your viewers. Try to resize your images before adding them to your page.

Naturally, you will have resized your images and used the smallest resolution practical to maintain image quality to allow for the fastest load time for your page. (this is something you should be doing anyway)

Anyway, you should be able to go to preview mode and see my small images in action!

If you mess up the code in the Stacks and want to start fresh, delete all the code and use the included snippet to re-install the code. If you do this, you might notice that the snippet code includes double quotes, " , in the code where the code that automatically appears in El Book-o when you first drag it onto a page contains single quotes, ' . Either will work but the stacks developer interface requires that I use single quotes to build the stack. You may use either but I’d recommend that you not mix... use one or the other. Example:
From the stack itself: 'http://www.shukapaw.com/book_images/Bryce-5.jpg','#',
From the snippet: "http://www.shukapaw.com/book_images/Bryce-5.jpg","#",

Now I think it is time to see the Inspector for El Book-o. If you click anywhere on the blue dotted border around the El Book-o stack, you should get an “X” and a small "i" (Image 3) that appears to the upper left of the stack. To access the Inspector, click the "i". The Inspector will look like Image 4.

Let’s examine the Inspector (Image 4) :

1) This slider adjust the image width of each image in your book. Remember, if you are using the regular version of El Book-o, you will have two images side by side. Therefore, a 300 px wide image will produce a 600 px wide book.
2) This slider adjust the image height of each image in your book. Remember, if you are using the horizontal version of El Book-o (El Book-o Vertical), you will have two images one above the other. Therefore, a 300 px tall image will produce a 600 px tall book.
3) Color of the small border surrounding El Book-o and appearing between the pages
4) Transition speed of the automatic page turning. A higher number results in a faster page turn.
5) The time each image will pause and display at the end of the transition.
NOTE: El Book-o will pause at any image when the user places their mouse over the book.



BONUS! (Image 5) :

Stacks V1.3 includes the ability to have tool tips in the Stacks inspector. El Presidente has included these for you. As you can see from the image at the right, when an input field is hovered over with the mouse pointer, a tooltip appears. This tip contains extra information to help explain what the user can change.

Thanks to Isaiah at Yourhead, creator of Stacks, for this awesome new feature!


Hot El Book-o Tips:
1) Make sure you read, understand and follow the instructions in the manual.
2) Proceed slowly and check your work often.
3) El Book-o is a relatively simple javascript effect. It may not play nicely with other javascript Stacks. There is no guarantee that it will work in conjunction with any other animated stack. However, I have successfully used El Book-o in a number of pages with other animated stacks with no problem. We should all consider the advice given by Isaiah, creator of Stacks, who said: ”One effect per page”. You can experiment and try more but make sure you test with all browsers. It would be a shame for anybody to not be able to view an effect you’ve included because a couple of stacks are conflicting with one another.
4) You can only have one El Book-o on a page.
5) Remember to add commas as instructed after every line except the last!!
6) Make sure you read, understand and follow the instructions in the manual. I’ve put a lot of time into the manual to try to make things run smoothly for you. If you ever encounter a hurdle that you cannot clear, you can always contact me through the ElStacko.com site on the contact page.
7) Have fun!