This Tutorial is meant primarily for jQuery/HTML beginners.
3D Gallery
Embed Theatre In An HTML
Add the jquery.theatre.min.js and theatre.css to the head section of your HTML page.
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
<link type="text/css" rel="stylesheet" href="/PATH/theatre.css" />
<script type="text/javascript" src="/PATH/jquery.theatre.min.js"></script>
</head>
<body>
...
</body>
</html>
Notes:
- Replace the "/PATH" with correct path pointing to the folder with extracted Elixon Theatre ZIP archive.
- You can omit the first
script tag referencing the Google-hosted jquery.min.js if you already has your own JQuery embeded on the page.
Gallery Markup
Now add your images to the page and wrap them into div element with id attribute for easier scripting.
<html>
<head>
...
</head>
<body>
...
<div id="myGallery" style="visibility: hidden; text-align: center; width: 100%; height: 300px;">
<img src="/images/image01-lores.jpg" style="height: 1px;"/>
<img src="/images/image02-lores.jpg" style="height: 1px;"/>
<img src="/images/image03-lores.jpg" style="height: 1px;"/>
<img src="/images/image04-lores.jpg" style="height: 1px;"/>
<img src="/images/image05-lores.jpg" style="height: 1px;"/>
</div>
...
</body>
</html>
Notes:
- The style
visibility: hidden; will ensure that the images won't be visible during the download phase. Elixon Theatre will unhide the element automatically when it kicks in.
- Make sure you link to the existing images that you have uploaded to your server. In case of hi-res images consider using low-resolution copies (save the user's bandwidth and time and be nice to slower computers).
- Attribute
style="height: 1px;" specifies the initial image dimensions for nice zoom-in effect when Theatre starts.
- Style
width: 100%; height: 300px; specifies the gallery dimensions.
Run Elixon Theatre
Now you are ready to call Elixon Theatre to make its magic. Place anywhere on the page this script.
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript">
$(window).load(function() {
$("#myGallery").theatre({
/* other options here */
selector: "img",
effect: "3d"
});
});
</script>
...
</body>
</html>
Notes:
- Elixon Theatre has rich set of options you can use. For the full list refer to the documentation
Optional Enhancements
Image Links
Gallery images can act as standard hypertext links leading the user to other page when clicked.
To achieve this simply wrap the img tags into links.
<html>
<head>
...
</head>
<body>
...
<div id="myGallery" style="visibility: hidden; text-align: center; width: 100%; height: 300px;">
<a href="/product01.html"><img src="/images/image01-lores.jpg" style="height: 1px;"/></a>
<a href="/product02.html"><img src="/images/image02-lores.jpg" style="height: 1px;"/></a>
<a href="/product03.html"><img src="/images/image03-lores.jpg" style="height: 1px;"/></a>
<a href="/product04.html"><img src="/images/image04-lores.jpg" style="height: 1px;"/></a>
<a href="/product05.html"><img src="/images/image05-lores.jpg" style="height: 1px;"/></a>
</div>
...
</body>
</html>
High Resolution Pop-Ups
Since the best web practices dictate to use low resolution
images to save the bandwidth and speed up the download times
you might need an option to preview the higher resolution
image in nice pop-up layer. Elixon Theatre does not include any pop-up
functionality by default but it plays well with other jQuery
plugins so you can use any fancy pop-up jQuery plugin you like.
One of the most popular pop-up plugins is FancyBox available from http://fancybox.net/ . Lets use it.
First wrap the img tags into links pointing to higher resolution images.
<html>
<head>
...
</head>
<body>
...
<div id="myGallery" style="visibility: hidden; text-align: center; width: 100%; height: 300px;">
<a href="/images/image01-hires.jpg"><img src="/images/image01-lores.jpg" style="height: 1px;"/></a>
<a href="/images/image02-hires.jpg"><img src="/images/image02-lores.jpg" style="height: 1px;"/></a>
<a href="/images/image03-hires.jpg"><img src="/images/image03-lores.jpg" style="height: 1px;"/></a>
<a href="/images/image04-hires.jpg"><img src="/images/image04-lores.jpg" style="height: 1px;"/></a>
<a href="/images/image05-hires.jpg"><img src="/images/image05-lores.jpg" style="height: 1px;"/></a>
</div>
...
</body>
</html>
Download the FancyBox from http://fancybox.net/. Put extracted files on your site in folder of your choice and embed it to your page as described in documentation that comes with FancyBox. It will look like this:
<html>
<head>
...
<!-- Put this below the LINK element pointing to jquery.theatre.min.js -->
<link type="text/css" rel="stylesheet" href="/PATH/jquery.fancybox-VERSION.css" />
<script type="text/javascript" src="/PATH/jquery.fancybox-VERSION.pack.js"></script>
...
</head>
<body>
...
</body>
</html>
Notes:
- Replace the "/PATH" with correct path pointing to the folder with extracted FancyBox files.
- Note that linked
.js and .css files may have different names depending on which version of FancyBox you use. Check the actual file names in FancyBox package you downloaded.
- In case of any problems consult the documentation at http://fancybox.net/howto or contact the programmer of FancyBox.
- You can use other jQuery extensions of your choice. FancyBox is just an example that Elixon Theatre plays well with other jQuery plugins.
Add this code anywhere on the page into HTML body section or optionally in HTML head section below the script that loads jQuery core library jquery.min.js.
<script type="text/javascript">
$(function() {$("#myGallery a").fancybox();});
</script>
Notes:
- FancyBox has a wide range of parameters that control its behavior. Please, refer to FancyBox documentation at http://fancybox.net/api .
