Gallery: Snapshots

[tesscodes]

↠LET'S TAKE A TRIP↞

↠COME AWAY WITH ME↞

↠I WANNA GET LOST WITH YOU↞

↠SO MANY PLACES, SO LITTLE TIME↞

↠HOME IS WHERE THE HEART IS↞

CODE BY TESSISAMESS

information

Welcome to another code from Tessisamess!

Gallery codes seem to be my new crack lmfao. This gallery features large photos and unobtrusive design that allows your images to be the center of attention; with arrow navigation and small text captions overlaid in the center, there's just enough going on to keep things interesting.

You can add as many slides as you want, just remember to keep captions short, and to edit your numbering as you go. A vertical version is available below, as well as no-text versions of both horizontal and vertical galleries. Enjoy! <3

the coding

Oh, yeah. These are the goods!

Paste your code into a code tester, then follow the directions below to get your code rolling!

HORIZONTAL: WITH TEXT
<lj-raw><div style="margin:0 auto 10px auto;width:700px;height:500px;overflow:hidden;background:#ddd;border:20px solid #fff;box-shadow:0 0 0 1px #ccc,2px 2px 5px 0 rgba(0,0,0,0.2);text-align:center;color:#555;letter-spacing:6px;font-size:8px;font-family:helvetica,arial,sans-serif;font-weight:bold;"> <a name="1"></a><div style="background:url(IMAGE1);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#5"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#2"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><font size="2">&#8608;</font> QUOTE LINE GOES HERE <font size="2">&#8606;</font></div></div> <a name="2"></a><div style="background:url(IMAGE2);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#1"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#3"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><font size="2">&#8608;</font> QUOTE LINE GOES HERE <font size="2">&#8606;</font></div></div> <a name="3"></a><div style="background:url(IMAGE3);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#2"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#4"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><font size="2">&#8608;</font> QUOTE LINE GOES HERE <font size="2">&#8606;</font></div></div> <a name="4"></a><div style="background:url(IMAGE4);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#3"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#5"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><font size="2">&#8608;</font> QUOTE LINE GOES HERE <font size="2">&#8606;</font></div></div> <a name="5"></a><div style="background:url(IMAGE5);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#4"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#1"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><font size="2">&#8608;</font> QUOTE LINE GOES HERE <font size="2">&#8606;</font></div></div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

HORIZONTAL: WITHOUT TEXT
<lj-raw><div style="margin:0 auto 10px auto;width:700px;height:500px;overflow:hidden;background:#ddd;border:20px solid #fff;box-shadow:0 0 0 1px #ccc,2px 2px 5px 0 rgba(0,0,0,0.2);text-align:center;color:#555;letter-spacing:6px;font-size:8px;font-family:helvetica,arial,sans-serif;font-weight:bold;"> <a name="1"></a><div style="background:url(IMAGE1);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#5"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#2"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="2"></a><div style="background:url(IMAGE2);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#1"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#3"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="3"></a><div style="background:url(IMAGE3);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#2"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#4"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="4"></a><div style="background:url(IMAGE4);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#3"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#5"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="5"></a><div style="background:url(IMAGE5);height:260px;overflow:hidden;background-size:cover;padding-top:240px;"><a href="#4"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#1"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

VERTICAL: WITH TEXT
<lj-raw><div style="margin:0 auto 10px auto;width:500px;height:700px;overflow:hidden;background:#ddd;border:20px solid #fff;box-shadow:0 0 0 1px #ccc,2px 2px 5px 0 rgba(0,0,0,0.2);text-align:center;color:#555;letter-spacing:6px;font-size:8px;font-family:helvetica,arial,sans-serif;font-weight:bold;"> <a name="1"></a><div style="background:url(IMAGE1);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#5"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#2"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"> QUOTE LINE GOES HERE </div></div> <a name="2"></a><div style="background:url(IMAGE2);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#1"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#3"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"> QUOTE LINE GOES HERE </div></div> <a name="3"></a><div style="background:url(IMAGE3);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#2"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#4"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"> QUOTE LINE GOES HERE </div></div> <a name="4"></a><div style="background:url(IMAGE4);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#3"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#5"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"> QUOTE LINE GOES HERE </div></div> <a name="5"></a><div style="background:url(IMAGE5);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#4"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#1"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a><div style="padding:10px;background:#fff;margin:0 150px;box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"> QUOTE LINE GOES HERE </div></div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

VERTICAL: WITHOUT TEXT
<lj-raw><div style="margin:0 auto 10px auto;width:500px;height:700px;overflow:hidden;background:#ddd;border:20px solid #fff;box-shadow:0 0 0 1px #ccc,2px 2px 5px 0 rgba(0,0,0,0.2);text-align:center;color:#555;letter-spacing:6px;font-size:8px;font-family:helvetica,arial,sans-serif;font-weight:bold;"> <a name="1"></a><div style="background:url(IMAGE1);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#5"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#2"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="2"></a><div style="background:url(IMAGE2);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#1"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#3"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="3"></a><div style="background:url(IMAGE3);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#2"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#4"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="4"></a><div style="background:url(IMAGE4);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#3"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#5"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> <a name="5"></a><div style="background:url(IMAGE5);height:350px;overflow:hidden;background-size:cover;padding-top:350px;"><a href="#4"><img src="http://i.imgur.com/wDWPbPG.png" style="float:left;"></a><a href="#1"><img src="http://i.imgur.com/NoZH9bJ.png" style="float:right;"></a></div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

installation guide

Everything you need to know about editing this code!

INFORMATION REPLACEMENTS
IMAGE1 through IMAGE5 to insert your images; these can be any size you want, but if you want an exact crop make sure they are 500x700 or 700x500 depending on which orientation you use.
QUOTE LINE GOES HERE (x5) for your quote; these are vertically centered, so choosing quotes that are too long will make the boxes sit lower.

APPEARANCE REPLACEMENTS
#fff to change the background color.
#ccc to change the border color.
#555 to change font color.
0,0,0, to change the box shadow color.
8px to change the font size.
helvetica,arial,sans-serif to change bulk font.
&#8608; and &#8606; to change or remove textbox arrow symbols.
http://i.imgur.com/wDWPbPG.png and http://i.imgur.com/NoZH9bJ.png to change or remove navigation arrows.

terms of use

Please respect my usage agreement; thank you!

♥ Keep credit backlink in place.
♥ Do not redistribute my codes in part or in whole.
♥ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♥ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

notes

Just some things to keep in mind!

♥ Most of my in-entry codes utilize lj-raw, which means things like line breaks need to be done with the HTML <br> tag.
♥ Some of my codes look great without using an lj-cut! But be aware, some of them (very large codes, or any code that utilizes tables) really should be behind a cut; spare your friends' f-pages and give it a look after posting! If it stretches out your journal entry or cuts off on the side, chances are it's going to warp other people's styles as well.

PURCHASE • FREE LAYOUTS • FREE IN-ENTRY CODES • MY TUTORIALS • PB ICONS