Welcome to SmugLuvThe panning gallery for SmugMug.

Drag the images below around to pan the entire gallery. If you see a picture you like, double click it to see the full version.

What is SmugLuv?What, exactly, is SmugLuv.

SmugLuv is an easy to use javascript object that provides a pannable view of a SmugMug gallery. This allows you to display very large galleries without using all of your page real estate. You can put huge galleries in places on your website that you never could before.

You could put all your galleries in the sidebar of your website. Or, you could include a giant set of pictures right in the contents of your blog, without losing the reader. Just pan around the gallery, and when you see a picture you want to see up close, you just double click it and it opens the default SmugMug gallery page of that image.

Can I see a demo of SmugLuv in action?Is it really that cool?

All of the galleries on this page are demos of SmugLuv, and how easy it is to use. There are 4 SmugLuv galleries on this page alone, each with different configurations. This page shows you the different sizes of SmugLuv galleries that are possible, the different size thumbnails in the SmugLuv galleries, and how easy it is to embed more than one SmugLuv gallery on a single page. Go ahead, drag them around to see the rest of the galleries.

How does SmugLuv work?What does it take to make this happen?

SmugLuv is actually very easy to use. You just include a few javascript files and copy/paste some html and javascript into your page, and you are done. All you really need to know is your SmugMug api key, and the album id of the gallery you want to show. The rest is just copy/paste.

Technically speaking, SmugLuv is a client side script written in javascript. There is no server side components that you need to install. Everything runs on the client in your browser. The javascript files make calls to the SmugMug APIs and fill the pannable area with all the images from the gallery you choose. And, although the thumbnails are small, it does not download any of the thumbnails that you cannot see, until you pan over to them. That saves in bandwidth and makes your pages still load very quickly.

How do I get SmugLuv?SmugLuv is awesome! Where can I get it?

You can download the SmugLuv scripts, which include the mootools script, the SmugLuv viewer, the SmugMug api implementation, and this page as a demo of how to tie it all together. You can download everything here.

Now that I have downloaded SmugLuv, how do I install it on my site.Great! I downloaded your stuff. Now what?

Installation is very easy.

First, copy the javascript files from the zip file you just downloaded to your web project folder.

Next, open the index.html file and copy the javascript includes and paste them into your html file.

<script type="text/javascript" src="javascript/mootools.v1.1.js"></script>
<script type="text/javascript" src="javascript/SmugLuv-0.0.1.js"></script>
<script type="text/javascript" src="javascript/jsSmug-0.0.1.js"></script>

Copy the script initialization script block to your html file.

<script language="javascript">
  //
  // This is the script initialization script block.
  //
  window.addEvent('domready', function()
  {
    //
    // apiKey = your api key from SmugMug.
    // divId = the id of the div to put the SmugLuv gallery.
    // thumbHeight = the height of the thumb inside the SmugLuv gallery.
    // thumbWidth = the width of the thumb inside the SmugLuv gallery.
    // albumId = the album id from SmugMug that you want to display in the SmugLuv gallery.
    //
  
    var apiKey = "H57C0LjpPMwc6HFdSHv31mBLX2cbw7Tx";
    var divId;
    var thumbHeight;
    var thumbWidth;
    var albumId;

    //
    // start the gallery initialization block
    //
    divId = "smugLuvLarge";
    thumbHeight = 113;
    thumbWidth = 150;
    albumId = "3623546";

    new SmugLuv(divId, apiKey, thumbHeight, thumbWidth, albumId);
    //
    // end the gallery initialization block
    //
   }
 </script>

For each SmugLuv gallery that you want to show on your page, do the following:
1. Copy the gallery initialization block from the example.
```
//
// start the gallery initialization block
//
divId = "smugLuvLarge";
thumbHeight = 113;
thumbWidth = 150;
albumId = "3623546";

new SmugLuv(divId, apiKey, thumbHeight, thumbWidth, albumId);
//
// end the gallery initialization block
//
											
```
2. Replace the divId value with the id of the div you want to turn into a SmugLuv gallery.
3. Replace the thumbHeight value if you want the thumbs to be a different height than the default.
4. Replace the thumbWidth value if you want the thumbs to be a different width than the default.
5. Replace the albumId with the SmugMug album id of the album you want to show.
6. And, the last step is to create a div that will house your SmugLuv gallery:
```
<div id="smugLuvLarge" style="height: 240px; width: 250px;"></div>
											
```
  Remember, you must name this div the same as you named it in the gallery initialization block from above. And, the only style configuration that you must apply to this div is the height and width. The rest is optional.
Thats it! You should have your own SmugLuv gallery on your page now. If you have any problems, feel free to post them to the SmugMug API Forum, or drop me a line at jesse.foster at gmail.com, and I will do my best to help you.

Who wrote SmugLuv and why?Why did they spend all this time?

My name is Jesse Foster, and I wrote SmugLuv, well, most of it, anyway. SmugLuv started out as a project to try something new in the world of gallery presentation. I wanted come up with a better way to share a bunch of images. After I had the idea, I needed a picture host.

I was going to choose someone like flickr or picassa web albums, but those services were disappointing, at best, and didn't do everything that I needed. And, that is where SmugMug came in. I can't remember how I found SmugMug, but I am glad I did. I signed up for their free account, and then found that they give accounts away to api developers! Well, you cant beat that, or so I thought. Once I started posting on their forums, along with their other 19,188 members, and I saw how quickly and personally they responded to emails, I was hooked.

So, what started as a proof of concept on gallery presentation has turned into a quest to win an iPhone and provide something very cool to a very cool company.

With all that in mind, I did not write all of SmugLuv by myself. Like most developers, I "stood on the shoulders of giants", and used code from other sources to make this possible. First of all, the viewer is a heavy modification of the IIPMooViewer script that is used to view the images served by the really cool IIPImage Server. And, these guys, in return, used the scripts from the guys over at MooTools.net. The 3rd javascript in this package is a completely custom start of a pure javascript implementation of the SmugMug REST/JSON api. I say it is a start because it is not finished, but it is expandable and a good framework. I just do not need the rest of the SmugMug rich api at this time.

SmugLuv? What kind of name is that?Sounds filthy.

I asked my wife, "Hey, I'm writing a completely client side application in javascript to interface with SmugMug's api to display an entire gallery in a small area using the panning technique. What should I name it?", and she replied, "How about SmugLuv?". I said, "Sounds good to me."

SmugLuv