Yet another jQuery lightbox plugin. Why make another one? Making a plugin teaches you Javascript modular pattern and DOM manipulation. Like many smart programmers would tell you. You learn more by doing than just reading lessons on the matter. If you find my plugin helpful send me a tweet or a like. Happy coding!
“The formulation of the problem is often more essential than its solution" - Albert Einstein -
Like many projects, you start with the problem. With the problem in mind, you can set out with a roadmap that will keep you focused on the task.
How do I use jQuery to transform my image links into overlay previews?
Let's add restrictions. Limitations produce more creative ideas than freedom. So for this problem, I want the solution to be:
- a jQuery plugin
- proof-of-concept include images and thumbnails - formatted as "image.jpg" and "image_thumb.jpg" correspondingly
- content agnostic
- does not know anything about the images - size or compression.
- anchors are optional, but for semantic purposes and accessibility, thumbnails must be wrapped in anchor tags with a corresponding href to the target URL. e.g.
<a href="my_cool_image.png">
<img src="my_cool_image_thumb.png" />
</a>- must iterate on a DOM block(div, p, section etc) and not the whole page.
The plugin will iterate on children of blocks converted to boxerJS blocks.
<div class="boxer">
<h3>Thumbnails</h3>
<a href="assets/dog1.jpg" title="Dog 1"><img src="assets/dog1_thumb.jpg" alt="dog 1"></a>
<a href="assets/dog2.jpg" title="Dog 2"><img src="assets/dog2_thumb.jpg" alt="dog 2" data-pin-nopin="true"></a>
<a href="assets/dog3.jpg" title="Dog 3"><img src="assets/dog3_thumb.jpg" alt="dog 3" data-pin-nopin="true"></a>
</div> $(".boxer").boxer();TO prevent performance issues, the callback must be attached to the parent, instead of the child elements. This will optimize the event processing through event delegation.
Using an overlay makes the solution a modal control. Modal meaning it prevents the user from accessing other portions of the page except for what's exposed by the modal control.
-
Download from https://github.com/chrisbautista/boxerjs
> git clone https://github.com/chrisbautista/boxerjs or > wget https://github.com/chrisbautista/boxerjs/releases/latest
-
Copy boxer.js, boxer.css, and close.png into your project
-
Include boxer.js and boxer.css
Place stylesheet inside the head tag (<head></head>).
<link rel="stylesheet" href="js/boxer/boxer.min.css">
JavaScript before closing body tag(</body>) tag,
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/boxer/boxer.min.js"></script>
-
Wrap anchors in a container e.g.
<div class="boxer" > <a href="picture.png" title="this is a picture" > <img src="picture_thumb.jpg" /> </a> </div >
-
Run code
<script> $(".boxer").boxer(); </script>
Default:
var options= {
// default class selector for overlay, inserted at runtime
overlayName: "previewOverlay",
// set width and height
width: 600,
height: 400
}; http://chrisbautista.github.io/boxerjs/
- loading indicator
- presentation mode
- previous and next image indicators
- Chris Bautista - @chrisbautista
If you find a bug, send a pull request or thought of a great idea to extend boxerjs, shoot me an email at chris at codespud dot com