Comic Fury Webcomic Hosting - Lightbox drawings/fanart gallery

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Lightbox drawings/fanart gallery
Pages: [1]

"Lightbox drawings/fanart gallery guide", 26th Jul 2015, 7:00 PM #1
Ypsilenna

User avatar
Posts: 63
Registration date: 15th Jan 2015
Location: Poland
Hey guys!
Yesterday I've been working on my webcomic website and I created a lightbox gallery for some artworks. I haven't seen anything like that on other webcomic websites so I thought I could share it with you in case if anyone needs it.
Here's how it looks on my website: LINK

The script I've used is called Easybox, you can get it here: LINK
If you don't know how to install it here's the guide:
1) Download .zip file and unzip it.
2) Go to Extra files on your webcomic panel and upload these to the /easybox folder:
-distrib.min.js
-easybox.min.js
-handlers.min.js
-jquery.mousewheel.min.js
-jquery-1.8.2.min.js
-autoload.min.js (it's in extras folder, upload it to /easybox/extras)
-Theme files. Pick one of themes available in the package you've downloaded and upload every single theme file to /easybox/styles folder (I've picked DEFAULT)
3)Create an extra page for your gallery and put these in it:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<link rel="stylesheet" href="/files/easybox/styles/default/easybox.min.css" type="text/css" media="screen" />
(If you've picked different template replace DEFAULT with your template name)
and
<!-- concatenated -->
<script type="text/javascript" src="/files/easybox/distrib.min.js"></script>

<!-- seperate files -->
<script type="text/javascript" src="/files/easybox/easybox.min.js"></script>
<script type="text/javascript" src="/files/easybox/handlers.min.js"></script>
<script type="text/javascript" src="/files/easybox/extras/autoload.min.js"></script>

4) At this point the script is installed but you still need to connect it with your gallery. In order to do so simply create a set of links:
Version with thumbs:
<a href="[path to your image 1]" title="[Image caption]" class="lightbox" data-group="set"><img src="[path to your image 2]"</a>
<a href="[path to your image 1]" title="[Image caption]" class="lightbox" data-group="set"><img src="[path to your image 2]"</a>

Version with links:
<a href="[path to your image 1]" title="[Image caption]" class="lightbox" data-group="set">Link</a>
<a href="[path to your image 1]" title="[Image caption]" class="lightbox" data-group="set">Link</a>

I hope it's going to be useful, good luck with your websites :)
_______________________
26th Jul 2015, 7:20 PM #2
Alibeastly

User avatar
Posts: 337
Registration date: 1st Nov 2014
Location: Canada
ohh thank you! I was wondering how to do that recently this is really helpful! :D
_______________________
Forum > Layouts, HTML, CSS & Javascript > Lightbox drawings/fanart gallery
Pages: [1]