Customizing SMF > Modifications and Packages

Highslide Image Viewer

(1/115) > >>

digger:
Link to Mod

This mod integrates Highslide JS script into SMF.

===
What is Highslide JS?

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:
* No plugins like Flash or Java required.
* Popup blockers are no problem. The content expands within the active browser window.
* Single click. After opening the image or HTML popup, the user can scroll further down or leave  the page without closing it.
* Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

===
Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites. http://highslide.com/#licence

===
Highslide Image Viewer mod features:

* Show full-size image like popup window when user click thumbnail
* Autoresize full-size image for browser window
* Slideshow for images on page
* Prev/Next with arrow keys
* Also works for thumbnails from iPicture.ru, Imageshack.us and Photobucket.com. (Fixes for Imageshack.us & Photobucket ported from karlbenson's Integrate Lightbox mod)

===
Demo: http://simple-machines.ru/index.php?topic=7.0

===
You can modify SMF Gallery to work with Highslide mod. (Tested with SMF Gallery 1.9.3)

in Gallery.template.php
find four places looks like this code (there may be some differences like alt='')

--- Code: ---echo '<td align="center"><a href="' . $scripturl . '?action=gallery;sa=view;id=' . $row['ID_PICTURE'] . '">
<img ' . ($GD_Installed == true ?  'src="' . $modSettings['gallery_url'] . $row['thumbfilename'] . '" ' : 'src="' . $modSettings['gallery_url'] . $row['filename'] . '" height="78" width="120" ')  . ' border="0" alt="" /></a><br />';

--- End code ---
and replace with

--- Code: ---echo '<td align="center"><a href="' . $modSettings['gallery_url'] . $row['filename'] . '" class="highslide" rel="highslide">
<img ' . ($GD_Installed == true ?  'src="' . $modSettings['gallery_url'] . $row['thumbfilename'] . '" ' : 'src="' . $modSettings['gallery_url'] . $row['filename'] . '" height="78" width="120" ')  . ' border="0" alt="' .  '<a href=\'' . $scripturl . '?action=gallery;sa=view;id=' . $row['ID_PICTURE'] . '\'>[Detail]</a>' . '" /></a><br />';
echo '<div class="highslide-heading">' , @$context['gallery_cat_name'] , '</div>';

--- End code ---

===

--- Quote ---Is there a way to remove the the image link on the bottom of the picture?  I am using RC7.

--- End quote ---
remove from Subs.php

--- Code: ---$b[5] = str_replace('alt=""', 'alt="' . $b[2] . '"', $b[5]); // Add filename to caption

--- End code ---

===
How disable highslide for linked images.

In /Sources/Subs.php
find
// * Highslide mod
add before
/*
find
// Highslide mod *
add after
*/

===

cme1st2302:
Very cool digger!!!  I might just have to add this to the new site!!

Chris

karlbenson:
very nice mod.

genieuk:
Wow!

Thanks, been wanting a mod to do exactly this :)

Mat

Simplemachines Cowboy:
Excellent!
Works perfectly on 1.1.6.

Navigation

[0] Message Index

[#] Next page