_______________________

 LightUp README
_______________________



What is this funky jazz?
------------------------

LightUp is a simple, easy, responsive lightbox to be used with jQuery (1.11).



Who's this for?
---------------

This plugin was created by Aaron Cooper for unlimited use EXCLUSIVELY for Cybacat Ltd and for any sites they produce for other businesses/clients.



How do I use it?
----------------

-- Setting up the HTML --

  1. Include lightup.css and jquery.lightup.js in your html/php page. The css file can go anywhere, but ideally above your main stylesheet. The js file HAS to come after jQuery.

  2. This plugin works on galleries of images best, that is- a container HTML element with images inside it, regardless of how many images you have (1 or more). The images MUST be placed inside a <a> link, or the <a> link must have the background image set to the thumbnail image you want to show. You MUST also fill the <a> tag's href attribute with the source image. This is what the plugin uses to refer to the full-size image, and works as a fallback if javascript is disabled.

  3. The container HTML element must have a class of lightup. The children <a> tags can have any class, doesn't matter.


-- Setting up the jQuery --

(this all goes inside your init.js, main.js or wherever all your js is situated)

  1. After doing the above steps and including the lightup jquery file, use this syntax to bind lightup to all your galleries on a page:
  
var options = {
	itemCont: '.lightup-item-cont',		// css selector for the item container - this should be the elements that sit alongside each other
	item: '.lightup-item'			// css selector for the thumbnail item (the <a> element)
};
  
$('.lightup-gallery').each(function(){
	$(this).lightUp(options);
});

  2. Boom! You're good to go. Either pass options to .lightUp(), or don't. The above specified options are defaults anyway, so if you're happy with them and happy to apply those classes to your HTML then it'll work without options.



Example HTML:
-------------

<div id="gallery-1" class="lightup">

	<div class="some-container-thing-if-you-want">
	
		<div class="thumbnail-container lightup-item-cont">
			<div class="some-other-thing-if-you-want">
				<a class="lightup-item" href="/path/to/source/image1" style="background:url('/path/to/thumbnail/image1') no-repeat center center; background-size: cover;"></a>
			</div>
		</div>

		<div class="thumbnail-container lightup-item-cont">
			<div class="some-other-thing-if-you-want">
				<a class="lightup-item" href="/path/to/source/image2" style="background:url('/path/to/thumbnail/image2') no-repeat center center; background-size: cover;"></a>
			</div>
		</div>

		<div class="thumbnail-container lightup-item-cont">
			<div class="some-other-thing-if-you-want">
				<a class="lightup-item" href="/path/to/source/image3" style="background:url('/path/to/thumbnail/image3') no-repeat center center; background-size: cover;"></a>
			</div>
		</div>
		
	</div>
	
</div>


(note: the "thumbnail-container" div isn't absolutely necessary, just showing how you can have the <a> tags nested inside a container element of it's own, if you so desire)



Example using PHP as well:
--------------------------

Exact same setup as above, just using PHP to loop through your gallery images

<div id="gallery-1" class="lightup">

	<?php foreach ( $gallery_images as $key => $image ) { ?>

	<div class="thumbnail-container">
		<a href="/path/to/source/<?php echo $image->thumbUrl; ?>" style="background:url('/path/to/thumbnail/<?php echo $image->thumbUrl; ?>') no-repeat center center; background-size: cover;"></a>
	</div>

	<?php } ?>

</div>



Also worth noting:
------------------

Currently this plugin only works to display one image at a time and doesn't support next/prev buttons for scrolling through images in the gallery to keep things simple and lightweight.

You will also notice warnings or outright errors in your browser console log if jQuery isn't included or if you've used a version that's older than 1.11 or newer than 1.xx (i.e. jQuery 2.xx).

Cybacat RULES!