Site in read-only mode

This site is now read-only following the release of MyBB 1.8 and the new mods site.

If you are looking for MyBB 1.8 mods please click here to visit the new mods site.

You can continue to download submissions for MyBB 1.6 and earlier here, however new submissions will only be accepted via the new mods site.

HIGHSLIDE

Overrides the [img] bbcode and uses Highslide JS to display images in a gallery.

Version: 1.0.0
Author: krewe
Submitted: 23rd December 2012
Last Updated: 24th May 2013
This extension overrides the [img] bbcode to add support for using the Highslide JS library for displaying images in a gallery.

In order to use this plugin, you will need to download the Highslide JS library available at http://www.highslide.com/download.php. Download the latest version as a full zip file. When you open the archive, you should see content similar to the following:
examples\
highslide\
images\
index.htm

Navigate into the "highslide" directory, and extract the following into resources:
graphics\
highslide-full.packed.js
highslide.css

You will then need to rename the file "highslide-full.packed.js" to "highslide.js". Then copy the above three items into the jscripts directory in your forum root.

The syntax:
[img]http://my.example.com/image1.jpg[/img]
[img align=right]http://my.example.com/image1.jpg[/img]
[img=My custom title]http://my.example.com/image1.jpg[/img]
[img='My custom title' align=left]http://my.example.com/image1.jpg[/img]

The only difference in syntax is that this extension replaces setting the default ability to set the dimensions of the image when displayed with the ability to set a title that is shown in the caption of the image when viewing in the gallery. If no title is set, then the caption will be set to the URL of the image. This plugin also forces images to display at a max width of 150px in posts.

You can add a border and margins to images in posts if you like by editing the global.css for your theme and adding the following (adjust to your needs):
a.image img {
border: 1px solid #444;
}

a.image img:hover {
border: 1px solid #999;
}

a.image {
margin: 2px;
}
Previews:Preview Image 6215 Preview Image 6216