Creating Facebook Page Photo Gallery

Everyone who created Facebook Fan Page think about: How create Facebook Page Photo Gallery? If you think like this then this tutorial for you:) So lets do simple photo gallery like this:

1. So first of all you need draw your gallery, i mean you must understand how your gallery will be looks like. For this please use Photoshop program.

2. After this create code for you your future fan page photo gallery.

Code for title:

<div style="color:#a3b82b; font-size:72px; padding:20px;">Photo Gallery</div>

Code for big image preview:

    <div style="float:left; padding:0 10px 0 20px">
        <div id="photo1"><img src="images/preview-1.jpg" alt="" width="448" height="321" /></div>
        <div id="photo2" style="display: none;"><img src="images/preview-2.jpg" alt="" width="448" height="321" /></div>
        <div id="photo3" style="display: none;"><img src="images/preview-3.jpg" alt="" width="448" height="321" /></div>
        <div id="photo4" style="display: none;"><img src="images/preview-4.jpg" alt="" width="448" height="321" /></div>
    </div>

Code for small image thumb:

   <div>
        <a href="#" clicktoshow="photo1" clicktohide="photo2,photo3,photo4"><img src="images/thumb-1.jpg" alt="photo 1" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo2" clicktohide="photo1,photo3,photo4"><img src="images/thumb-2.jpg" alt="photo 2" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo3" clicktohide="photo2,photo1,photo4"><img src="images/thumb-3.jpg" alt="photo 3" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo4" clicktohide="photo2,photo3,photo1"><img src="images/thumb-4.jpg" alt="photo 4" width="130" height="93" border="0" /></a>
    </div>

All code will be like:

<div style="width:760px; height:500px; font-family:Arial, Helvetica, sans-serif; background: #F7F7F7">
    <div style="color:#a3b82b; font-size:72px; padding:20px;">Photo Gallery</div>
    <div style="float:left; padding:0 10px 0 20px">
        <div id="photo1"><img src="images/preview-1.jpg" alt="" width="448" height="321" /></div>
        <div id="photo2" style="display: none;"><img src="images/preview-2.jpg" alt="" width="448" height="321" /></div>
        <div id="photo3" style="display: none;"><img src="images/preview-3.jpg" alt="" width="448" height="321" /></div>
        <div id="photo4" style="display: none;"><img src="images/preview-4.jpg" alt="" width="448" height="321" /></div>
    </div>
    <div>
        <a href="#" clicktoshow="photo1" clicktohide="photo2,photo3,photo4"><img src="images/thumb-1.jpg" alt="photo 1" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo2" clicktohide="photo1,photo3,photo4"><img src="images/thumb-2.jpg" alt="photo 2" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo3" clicktohide="photo2,photo1,photo4"><img src="images/thumb-3.jpg" alt="photo 3" width="130" height="93" border="0" /></a>
        <a href="#" clicktoshow="photo4" clicktohide="photo2,photo3,photo1"><img src="images/thumb-4.jpg" alt="photo 4" width="130" height="93" border="0" /></a>
    </div>
</div>

3. Then you need upload images to you hosting.
4. Add code to your facebook page code area(don’t forgot change way to your images, for example if your hosting name mysite.com then way for images must be
5. Enjoy with your cool photo gallery on Facebook Page:

Think this is simple tutorial can help you to create your own Photo Gallery and Put it to Facebook Page. Enjoy!
Thank you for reading.

Source files:
Facebook Page Photo Gallery example.