Gallery: Photographer

[tesscodes]

CODE BY TESSISAMESS

001: Informative Info Happy new year, you guys! Just thought I'd pop in while I finish up some jobs to post one of the codes I've had sitting around waiting for y'all! This is a minimalist photo gallery, perfect for displaying characters' visual inspirations, selfies, home interiors, or art; really you can do anything with it. You could even change the width to match the height and add in an instagram logo to the top, now that I think about it! Feel free to add as many rows as you want, just remember to correspond the a LINK to the a NAME it goes with as you add things (and add a br after every 6th thumbnail.) Your thumbnails should be square and 80px or larger. Your main images can be any size you want, but if you want them to sit a certain way just crop them to 500x550. Enjoy! <3

002: The Code Paste the following into a code tester, then follow the directions below! <lj-raw><div style="margin:0 auto;width:500px;text-align:center;padding:20px;background:#fff;border:1px solid #ccc;-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);"><div style="height:550px;overflow:hidden;"> <a name="1"></a><div style="height:550px;background:url(IMAGE1)center;background-size:cover;"></div> <a name="2"></a><div style="height:550px;background:url(IMAGE2)center;background-size:cover;"></div> <a name="3"></a><div style="height:550px;background:url(IMAGE3)center;background-size:cover;"></div> <a name="4"></a><div style="height:550px;background:url(IMAGE4)center;background-size:cover;"></div> <a name="5"></a><div style="height:550px;background:url(IMAGE5)center;background-size:cover;"></div> <a name="6"></a><div style="height:550px;background:url(IMAGE6)center;background-size:cover;"></div> </div><br> <a href="#1"><img src="THUMB1" width="80"></a> <a href="#2"><img src="THUMB2" width="80"></a> <a href="#3"><img src="THUMB3" width="80"></a> <a href="#4"><img src="THUMB4" width="80"></a> <a href="#5"><img src="THUMB5" width="80"></a> <a href="#6"><img src="THUMB6" width="80"></a><br> </div><br><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>

003: CTRL+F This Shit IMAGE1 through IMAGE6 to change your fullsize images; should be at least 500x550. THUMB1 through THUMB6 to change your preview images; should be square and at least 80px. **You can have as many images as the character limit will allow! Just remember to up the number in the 'a name' and 'a href' tags as you go, and put a <br> after every 6th preview thumb. Fullsize image's a name must have the same number as its thumbnail's a href. EDITING APPEARANCE #fff to change the background color. #ccc to change the border color. 500px to change the width. 550px to change the height (does not include thumbnail area.) 20px to change the surrounding padding. -webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2); to change the box shadow.

004: Rules and Shit →Leave my credit. →Do not redistribute in part or in whole. →If you break something during editing don't be scared to ask me to see what happened. Yep. That's a rule. →If you're a maker like I am and you do something cool with this I'd really like to see it, but it's not necessary. →LJ-RAW means ya gotta BR them line breaks! →Probably should be behind a cut, js js.