What is this?
PhizzBoxXL is a responsive, fullscreen image viewer with many options to customise how it works and how it looks.
It uses a mixture of JQuery and CSS3 transitions to create a great way to view your images.
Here's an example
Click the link below to view a demo of PhizzBoxXL. It shows the default options but there are plenty more to choose from as you'll see further down this page.
View demo-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Firstly, add the class to launch PhizzBoxXL
This can be added to anything. When it's clicked it will launch the gallery.
You can set the launching class name to whater you want and this is discussed in the options section further down the page. By default the class name is set to "launchPhizzBox".
Make sure to include the css file
This goes into the <head> of your page.
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">And the javascript files
These go just before the closing </body> tag in your page.
<script src="dist/js/jquery.js"></script>
<!-- Site specific scripts -->
<script src="js/scripts.js"></script>And here's the code
Below is the very minimum code you need. This will give you two images to flick between.
<div class="phizzBox">
<ul>
<li>
<img src="img/mainImage01.jpg" alt="Image 1" />
<div class="imageText">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="img/mainImage02.jpg" alt="Image 2" />
<div class="imageText">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
</div>Add your content
Add the description of your images into the <imageText> divs.
Customise it!
There are plenty of options to customise PhizzBoxXL. These are listed below.
-
Launch class name
This is the class name that will launch the gallery. by default it is set to "launchPhizzBox". This can be added to single or multiple items, such as one link or multiple images.
-
Theme
You can choose from a light or dark theme. Dark is set by default.
-
Auto play
Set as true or false. This determines whether or not the plugin will scroll through the images automatically.
-
Auto play speed
Set as a number. This controlls the delay between each image change.
-
Navigation
Set as true or false. If set to false, no thumbnails or pagination will show. If set to true, you then have to set either pagination or thumnails to show (outlined below).
-
Pagination
Set as true or false. Determines if pagination will be shown or not.
-
Thumbnails
Set as true or false. Determines if thumbnails will be shown or not.
-
Controls
Set as true or false. Determines whether or not to show the next and previous arrows.
-
Close
Set as true or false. Determines whether or not to show the close button. The gallery can also be closed using the escape key. This is always on so the user has some way of exiting the gallery.
Just add in your options where you call in the the plugin. This is just after where the javascript files are called in.
<script>
$('body').phizzBoxXL({
launch: '.launchPhizzBox',
theme: 'dark',
autoPlay: false,
autoPlayTime: 1000,
navigation: true,
pagination: false,
thumbnails: true,
controls: true,
close: true
});
</script>You're done!
You should now have PhizzBoxXL up and running and looking great on your site.
If you like the plugin please rate it on CodeCanyon.
Many thanks!