jQuery convertion: Panoramic Photoviewer in Javascript

This is part two of my script convertions. From scriptaculous to jQuery in just a few minutes of work. This time it’s the Panoramic Photoviewer to get a jQuery makeover.

A few highlights:
From 200 to 80 lines of code (wow).
Works in more browsers.
Lightweight due to jQuery usage.

For all the jQuery lovers: Here is the Panoramic Photoviewer. Now in jQuery!

jQuery convertion: Panoramic Photoviewer in Javascript

Download PhotoNav jQuery zip-archive Example PhotoNav jQuery examples

Since this article is a redo of Panoramic Photoviewer in Javascript I’ll just make it so that it fits jQuery.

The example page is located here:
http://www.gayadesign.com/scripts/jqueryphotonav/

And the archive is downloadable here:
http://www.gayadesign.com/scripts/jqueryphotonav/jqueryphotonav.zip

What is it?

This photo container has been adjusted to “move” with the cursor. To achieve this I used Javascript and a library called jQuery.

What do we have and what do we need to do?

  1. Create a HTML layout for the picture to get in.
  2. Adjust the CSS.
  3. Make a call to PhotoNav in Javascript.

1. Create a HTML layout

This is the easiest step. It might just as well be a copy paste of the code below. But be aware of three things.
First give the overall container an id (so Javascript can grab the object).
Then make sure the div with classname fixed gets a second classname to correspond with the CSS (I used opt1 and opt2).
Determine if you want to have links inside of the container, if not; you can leave the container empty.

Take a look at the code below:

<div class='photo' style='display: none;' id='navigate'>
    <div class='fixed opt1'>
        <!-- this is optional -->
        <a href='http://gayadesign.com/post/' class='button1'>
        
        </a>
        <a href='http://gayadesign.com/portfolio/' class='button2'>
        
        </a>
        <a href='http://gayadesign.com/about/' class='button3'>
        
        </a>
        <a href='http://gayadesign.com/partners/' class='button4'>
        
        </a>
        <a href='http://gayadesign.com/contact/' class='button5'>
        
        </a>
    </div>
</div>

The overall container “navigate” will always be hidden prior to the actual Javascript call. I also gave the fixed div a second class. This classname will point to the options of the container; the height and the background image (the actual image that needs scrolling).
You can add <a> tags to the fixed container. I gave them all classnames so they can be positioned in the CSS. This part is optional.

Remember to include the jQuery library and the PhotoNav Javascript files in the header. Also include the CSS file photonav.css.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/photonavjQuery.js" type="text/javascript"></script>
<link href='css/photonav.css' rel='stylesheet' type='text/css' />

2. Adjust the CSS

The top part of the CSS has to stay the way it is, do not adjust it if you don't know what you are doing. I put a comment at the spot where you can start to edit the CSS.
I'll describe what to do at each part of the CSS.

.photonav .photo:

.photonav .photo {
    width: 400px;
    margin: 10px;
    border: 1px solid gray;
}

Adjust the width of the total container. This has to be a fixed width in order for it to work in IE6. I have no idea why, but if the width was set to 100%, the height was 0px. You can do 100% in other browser with the !important trick.
The margin and border are optional, just make it as you'd like.

.photonav .photo .opt1:

.photonav .photo .opt1 {
    height: 100px;
    background-image: url();
}

This is the height of the photo container, at least, the fixed container. But notice the .opt1, it is the second classname we added to the fixed container in the HTML part.
The background image is the image that has to be viewed inside the container.

The next part is optional and only if you want buttons inside the container.

a.button*:

a.button1 {
    margin-left: 20px;
    margin-top: 30px;
    width: 100px;
    height: 90px;
    background-image: url();
}

a.button1:hover {
    background-image: url();
}

In order to create a menu navigation like I did on the preview page, you need to add a tags with different classnames. Define the pixels from the left side and the top of the container in the margin values. State the width and height of the button and the background image (if needed).
To create an onhover effect you can add an other image in the :hover part.
If you want a second a tag next to the other, subtract the height of the previous button from the margin-top.

3. Make a call to PhotoNav in Javascript
Now that you've got all the necessary HTML and CSS set, you can call the PhotoNav functionality. The following code can be put in a js file or in a strict tag.

document.getElementById('navigate').style.display = 'block';
PhotoNav.init('navigate', 758, 1412, false);

The specification is:
function init(String id_of_container, int width_of_container, int width_of_panorama_picture, bool debugMode);

String id_of_container:
The id of the container.

int width_of_container:
Give the width in pixels of the fixed container. For calculating reasons.

int width_of_panorama_picture:
Give the width in pixels of the panoramic picture. For calculating reasons.

bool debugMode:
Enable debug mode. Outputting value to the HTML element with id 'status'. (default: false)

If you want to enable debug mode, you have to insert the following code somewhere in your HTML:

<div id='status'>
    &nbsp;
</div>

Now that everything is set, you can fire the thing up! Enable the navigation on loading a page or by triggering an event in Javascript. If you have implementations of this script, post your examples in the comment section, I'd like to see them.

I hope you like the second convertion to jQuery. Stay tuned for more!

Good luck!

Liked this article? Sharing is caring!

25 Comments on this subject

  1. Your Javascript (and now jQuery) skills never cease to amaze me Gaya, great work here!

    Two small suggestions just for the future :)

    1. It might be nice to change the cursor to ‘pointer’. Maybe it is just me but I think it tells the user that the image has interaction associated with it.

    2. Some arrows or other graphics that could optionally be appended to the image would be nice for smoother/clicked scrolling.

    Again, thanks a lot for sharing this script :)

  2. Gaya said:

    Thank you both for commenting :) You are so nice to me.

    @Drew:
    About the suggestions: Thanks for thinking with me.
    I am not sure about the first suggestion. A pointer to the cursor gives me the impression I can click and do something on the image (which is not the case in the default sample.)
    The second suggestion is a good one though. Which would mean that the navigation would go in a totally different way. I’ll keep it in mind, could be a new challenge!

    Anyways: Glad both you and Farrhad like the tutorial.

  3. sundaramoorthy said:

    hi gaya, i have a problem in moving background image , i want to scroll the background image in all directions onmouseover (your code works fine for left and right direction). Is that possible to do the same in all directions. Urgent.

  4. Fabiano Guerra said:

    I’m making my first website and i really like this jquery tutorial, but i really don’t get how make it works… maybe i’m doing something wrong dude. I follow every step, but ir always goes wrong. Maybe because my english is not so good. I ask u if u can put some archive with an exemple commented, i’m putting the css inside a pre-exist div in my code, but, i can’t make it work… If u can help me, i’m starting now make pages and i really need start to work. Thanks.

  5. Fabiano Guerra said:

    I think maybe i dont understand the 3rd Step, i need make some changes in javascript file or stuff? U said i have to use this:

    ” document.getElementById(‘navigate’).style.display = ‘block’;
    PhotoNav.init(‘navigate’, 758, 1412, false); ”

    and make changes by this:

    The specification is:
    function init(String id_of_container, int width_of_container, int width_of_panorama_picture, bool debugMode);

    but i really dont get it where i put and change ths stuff, i try to see the exemple, but i still dont get it…

  6. Fabiano Guerra said:

    I know dude, i think its alright, but there’s a little bug that make the image starting when u go mouse over, its start with some margin, its not wrong but if u can fix that, u can make it better i think… just an ideia… thanks for share and keep doing this amazing work.

  7. Naina Redhu said:

    Thank you for this wonderful script Gaya. I’ve recently picked up an obsession with panoramas and was looking for including the shots on my blog. I’m sorry to bother you – but I do have a bit of a problem – there’s a huge empty space on the right and the same width of image is missing from the left – 835px in my case – I’ve tried all sorts of permutations and combinations but nothing works – either the image gets eaten up, repeats or the gap increases. I’ve integrated this slider in a blog post on my wordpress blog – so if you would know of any previous users facing the same issue & managing to solve it, please do point me in that direction.

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>