The Polaroid Photo Viewer-Non-Full Screen

11 January 2010 Monday

This application was viewed 1348 times

2

The Polaroid Photo Viewer - Non-Full Screen

Pretty fast after I placed the Polaroid Photo Viewer with CSS3 and jQuery example online, I received loads of e-mails and comments requesting another feature. The original example was only full-screen, but people wanted it to "stick" to a box (Placing it inside a <div>).

Try dragging the polaroids around in the demo. You´ll be able to do so, but the surrounding division seems to prevent the user from actually dragging it outside it´s container.

Just like with the original example, this example only works on modern browsers supporting CSS3 (Safari, Chrome and Firefox 3.5). This probably would work with Opera too, but I haven´t tested it.

Now to show you which small changes are made to the original script to make this one work.

View the DEMO

First things first

Since we´re not making the script full-screen anymore, we might want to trim down everything. This simply means:

Resizing all images (Polaroid background and foreground)
Trimming down the font-size in CSS
Changing some other static (yeah - it´s a bad thing) values in the CSS

This will leave us with a simple, "minified-version" of the original script (just small polaroids). Now that´s something we can work with.

HTML

So, let´s do the most basic (but important!) step in the HTML. This is what we had at first.

 
<div class="polaroid">
  <img src="images/01_colosseum.png" alt="Colloseum" />
  <p>Coloseum in Rome</p>
</div>
<div class="polaroid">
  <img src="images/02_vatican.png" alt="Vatican" />
  <p>Vatican</p>
</div>
<!-- More images here -->

Since we´ll need it to be locked to a surrounding container, this is the most obvious step to make:

 
<div id="polaroidcontainer">
  <div class="polaroid">
    <img src="images/01_colosseum.png" alt="Colloseum" />
    <p>Coloseum in Rome</p>
  </div>
  <div class="polaroid">
    <img src="images/02_vatican.png" alt="Vatican" />
    <p>Vatican</p>
  </div>
  <!-- More images here -->
</div>

And that´s what we´re going to work with (On the demo page, I added some extra information but that´s not necessary)!

jQuery

Apart from the changes made in the first step (trimming everything down), we don´t need to change the CSS; only jQuery. The following change is the most important one.

This was the original code:

 
// Make the polaroid draggable & display a shadow when dragging
$(".polaroid").draggable({
  cursor: ´crosshair´,
  // More draggable stuff here
});

Now the following is added, which is vital to make the script work:

 
// Make the polaroid draggable & display a shadow when dragging
$(".polaroid").draggable({
  containment: ´parent´,
  cursor: ´crosshair´,
  // More draggable stuff here
});

Tags: polaroid, jquery, gallery,