Ask yourself these questions:
- Don't have your own server side image rescaling scripts?
- Still loading 2560x1440 images when your viewers may still be on their old 1024x768 monitors (or worse yet, on their mobile devices)?
- Embedding your landscape panoramics into a tiny
<img>"thumbnail" fitted on some listing?
If you answered "yes" to any of them you should feel bad about yourself.
Just kidding.
Seriously, not everyone has the resources, know-how, or time to do that. Now ask yourselves these questions:
- Do you want to set
srcto something a little bigger than what your<img>container can fit? - Do you want to give your viewers the ability to see the full (or whatever can fit in their viewport) image in a minimal modal?
- Do you want to use some code that a college kid wrote because they had nothing better to do on a Friday night?
Yeah? You want lookiehere.
Much simple, very consise, wow.
- Download the .js file.
- Embed it at the end of your
<body>with<script src="lookiehere.js"></script>. - Invoke lookiehere (
lookiehere.init();) at the end of your script embeds, in adocument.readycallback, or whenever. - Add
lookiehereto<img>class attributes. - Added some more images dynamically? Invoke the bindImages method (
lookiehere.bindImages();) in your callbacks.
Wow Kelvin, white on black tabs? Are you stupid? Only 10em padding on the modal? Just stop making stuff, dude.
If you want to customize some features you can either:
- Edit the _options member in the lookiehere object
- Use the lookiehere.options method and give it an object with option keys and values (e.g;
lookiehere.options({color: '#DC2C90', opacity: 0.3}))
before calling lookiehere.init();.
Speaking of the options...
selector: A CSS-style selector that indicates which images lookiehere creates a tab or click event for. The default isimg.lookiehere.attribute: The attribute which indicates the URL of your full size image (e.g.;data-full-image-url="http://..."). The default issrc, which assumes the full size image is the one linked and embedded. Ifsrcpoints to a separate smaller thumbnail/preview image and the full size image can be accessed by another URL, use an attribute to hold that URL.
activateByTab: A boolean, true by default. If it is true, a small tab (a simplespan, really) will be created at the top-left of your image which can be clicked to activate the modal. If it is false, no tab will be created and the whole image will be clickable.tabText: Tab text. Can be HTML since it just sets the<span>'sinnerHTML. Go crazy with your Font Awesome.tabColor: CSS color string, name or hex value. It's the tab's background color!tabFontColor: Ummm...tabOpacity: Yeah.
padding: Set the padding between the modal/viewport and the image bounds. A string with appropriate CSS units should be given.color: The color of the modal background.opacity: The opacity of the modal background.transition: The transition time for the modal to fade in and out. Be sure it is a string with CSS time, like0.2s!
That's all! Go break it and file some issues!