Demo & Documentation for mBox jQuery plugin

mBox is a jQuery-based lightbox plugin designed for displaying images in a sleek and interactive way. It supports features like fullscreen mode, slideshow, rotation, keyboard navigation, and customizable options for title and description display.

1. Basic live demo

Click any of the images below to see the mBox in action. This is the most basic setup with minimal html markup and js code. Demo will launch in fullscreen by default.

• Demo
• HTML
• Javascript

<div id="example-1">

<div class="demo-pic"><a href="full/pic1.jpg"><img src="thumb/pic1.jpg"></a></div>

<div class="demo-pic"><a href="full/pic2.jpg"><img src="thumb/pic2.jpg"></a></div>



<!-- --- --- more pics here --- --- -->



</div>

$(document).ready(function(){

 $('#example-1 .demo-pic').mBox(); // just like any other plugin you would use

});

2. Advanced live demo

Code is similar to last demo. We have added title and some html info with each pic. Looks at js how we have specified the getTitle and getInfo properties to tell the plugin what to use as title and description. When you hover, click or tap(touch devices), you can see description as well. Also note that this demo wont launch in fullscreen by default.

• Demo
• HTML
• CSS
• Javascript

My old bike

The Hero Brand 2014 Model Yellow-Green Bike was not just a mode of transportation; it was a statement of individuality. Its vibrant yellow-green paint shone brightly, making it an instant head-turner on the roads. The ergonomic design ensured a smooth and comfortable ride, whether on busy city streets or serene countryside trails. Its lightweight frame and durable tires offered a perfect balance of speed and stability, making it ideal for both beginners and seasoned riders. With an adjustable seat and well-cushioned handle grips, it catered to all types of bikers. The bike’s gear system was intuitive, allowing seamless transitions even on rugged terrain. Its bell chimed cheerfully, announcing its arrival with a playful note. Reflective stickers on the body ensured visibility and safety during nighttime rides. For years, this bike had been a loyal companion, witnessing countless adventures. Every scratch and dent on its frame carried a story, making it more than just a bike—it was a cherished memory in motion.

Gooseberry Leaf

The gooseberry leaf, often overlooked, holds a quiet elegance in its delicate structure. Its slender shape and pointed tips give it a unique charm, setting it apart from other foliage. The leaf’s vibrant green color symbolizes freshness, vitality, and nature's resilience. Each vein branching through the leaf creates a beautiful pattern, as if nature itself had painted it with precision. These leaves are not only visually appealing but also have a mild, earthy fragrance that soothes the senses. In traditional medicine, gooseberry leaves are prized for their therapeutic properties, aiding in digestion and skin health. Their texture is smooth yet firm, reflecting their ability to thrive in varying climates. They sway gently in the wind, whispering secrets of ancient wisdom. When paired with the fruit they cradle, they complete a picture of nourishment and life. A single gooseberry leaf can inspire an artist's brush or a poet's pen, embodying simplicity and depth.

A Birthday Cake on Table

On the center of the table stood the most captivating birthday cake one could imagine, a delight for cricket lovers. Its base was a rich chocolate sponge, layered with smooth vanilla frosting that glistened under the party lights. The top of the cake was a miniature cricket field, complete with finely crafted stumps, a bat, and a ball made from sugar. Green fondant resembled the grassy outfield, while edible white frosting created the chalk boundary lines. In the middle of this edible stadium sat tiny players, their expressions and uniforms meticulously detailed. Around the cake’s edges, colorful sprinkles represented cheering fans, adding a festive touch. The craftsmanship was so lifelike that it felt as though a game was about to begin. Every slice revealed a swirl of delicious flavors, satisfying both the eyes and the palate. This cake was not just a dessert; it was a centerpiece, sparking joy and conversation among the party guests.

Pink Flowers

Nestled in a quiet corner of the garden, the pink flowers flourished in their vibrant beauty beside the sacred God Shankar stones. Their petals, soft as silk, radiated hues of blush and rose, exuding an air of serenity. These flowers seemed to bow gently towards the stones, as if paying homage to the divine energy they represented. The stones, weathered yet majestic, bore an aura of timeless spirituality, their surfaces adorned with traces of vermilion and sandalwood. Bees and butterflies flitted around the flowers, adding a lively rhythm to the tranquil scene. The fragrance of the blooms mingled with the earthy scent of the stones, creating a sacred and harmonious atmosphere. Each flower, though delicate, stood resilient, as though drawing strength from its divine neighbor. This setting invited quiet reflection, prayer, and a sense of connection to nature and spirituality. Together, the flowers and stones painted a picture of beauty, devotion, and peace, a perfect sanctuary for the soul.

<div id="example-2">



<!-- --- --- example pic --- --- -->



<div mbox-group="personal" class="demo-pic">

<a href="full/pic.jpg"><img src="thumb/pic.jpg"></a>

<div class="demo-title">title here</div>

<div class="demo-description">description here</div>

</div>



<!-- --- --- more pics here --- --- -->



</div>

.demo-title, .demo-description{

    display:none;

}

$('#example-2 .demo-pic').mBox({

    fullScreen: false, // launch in lightbox mode

    getTitle:'.demo-title', // fetch title from internal html

    getInfo:'.demo-description', // fetch info from internal html

    slideTime: 7000 // slide display time during slideshow

});

Defining mbox-group is a good idea to group images into a single gallery. If you dont define it, it defines it as a group named ungrouped.

3. Installation

Include the following files in your project:

<link rel="stylesheet" href="mbox/mbox.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="mbox/mbox.js"></script>

4. Configuration Options

5. Keyboard Navigation

You have reached the end of mBox documentation page. If you have more questions you can reach me via phploaded's contact page. No gurantees but i will try to look into it as soon as possible.