I want Fancybox to work on my divs - do I need to edit html?

I have some 'item' class divs, which are grey boxes with an image and a caption inside them. When they're clicked, I want them to appear bigger.

I have applied fancybox, but nothing happens. I have added all the relevant files into the html.

Here's the html code:

<div class="container">

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>


<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

</div>