News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Highslide Image Viewer

Started by digger, October 07, 2008, 09:37:35 PM

Previous topic - Next topic

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 MIT License.

===
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
* Work for attached and linked images with thumbnails
* Also works for thumbnails from Imageshack.us, Photobucket.com, iPicture.ru, Radikal.ru, Keep4u.ru, Xs.to and Fotosik.pl. (Fixes for Imageshack.us & Photobucket ported from karlbenson's Integrate Lightbox mod)

===
Github repository: https://github.com/realdigger/SMF-Highslide-Image-Viewer

===
Languages:
chinese-simplified-utf8
chinese-traditional-utf8
danish
dutch
english-utf8
english
french-utf8
italian
polish
russian-utf8
russian
serbian_latin-utf8
spanish_es
turkish

===
History
1.0 RC3 - First public release.
1.0 RC4 - Some language files added.
1.0 RC5 - Danish translation added.
1.0 RC6 - Some visual fixes.
1.0 RC7 - Fixed warning "Undefined index:  subject" with some portals/bridges. French-utf8 translation added.
1.0 RC8 - Fixed warning "Undefined index:  host" with wrong attachment path.
1.0 RC9 - Mod works with thumbnails from SMF Media Gallery.
For example
[img]http://smf-media.com/community/MGalleryItem.php?id=167;preview[/img]
[img]http://smf-media.com/community/MGalleryItem.php?id=167;thumb[/img]
---
1.0 - Support for thumbnails from Fotosik.pl added (Thanks to pecado). Polish translation added.
1.1 - Some bugfixes. Support for thumbnails from Xs.to added (Thanks to jamz)
1.2 - Some bugfixes.
1.3 - "Signature images bug" fixed.
1.4 - Support for mod Attachments Positioning added. (Attachments Positioning 1.2 tested)
1.5 - Support for mod Attachments In Message added. (Attachments In Message 1.3 tested)
1.6 - Updated for support SMF2 RC2.
1.7 - Updated for support SMF2.0 Gold. Dropped support for SMF1.

cme1st2302

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

Chris
SMF Version: 1.1.11
SimplePortal Version: 2.3.2

Admin

He who waits for perfect conditions sees nothing!!
If you need help adding a button or tab PM me!!

karlbenson


genieuk

Wow!

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

Mat

Simplemachines Cowboy

Excellent!
Works perfectly on 1.1.6.
My SMF forum: The Open Range

digger

Quote from: karlbenson on October 07, 2008, 09:41:56 PM
very nice mod.
Thank you for some code from your Integrate Lightbox mod.

MothMan

Does this mod use the forums default admin settings for the size limit?  Does it work only with images posted as attachments?

digger

Quote from: MothMan on October 08, 2008, 03:09:22 AM
Does this mod use the forums default admin settings for the size limit? 
yes

Quote
Does it work only with images posted as attachments?
with attachments,
with

[url=http://.../big_image.jpg][img]http://small_image.jpg[/img][/url]

and with thumbnails from iPicture.ru, Imageshack.us and Photobucket.com (thanks to  karlbenson for code).

baijianpeng

Great ! I just tested this Mod on my SMF 1.1.6 forum. It works very smoothly.

Two suggestions to improve it:

1. Please add those tooltips texts into the language file, so I can translate it into my native language.

2. If the image has a long name but narrow width, like long web page screenshot for fullpage, then those buttons, such as Prev, Next, Close, Original Size, will be squeezed to split into two lines.  Maybe we should trim those long filenames on the pop-up image?

Thanks to the author, great Mod!

How can I vote for this Mod? I want to give it 500 stars!   :D
JoomlaGate: The way to the World of Joomla!

http://www.joomlagate.com

genieuk

is there a setting in admin whether part of SMF or this mod to auto resize images over a certain size in posts/topics?

as i just tried it with a big image and it works great and with attachments etc but when i uploaded a image it was already big.

So is there a setting anywhere for SMF to resize images in posts/topics to a certain size?

Thank you,
Mathew

BOS4O


fals

#11
Works perfect !
[allready tweeked it a bit  ;D ]
http://www.fg-forum.dk/smf/index.php?topic=25035.0






500fan.dk - SMF 2.0 ~ custom theme
ls-forum.dk - SMF 2.0.2 ~ custom theme and custom iPhone theme

Tanks

I was unable to get it to work  - instead it just opened the image url

Could it be that i have incrypted filenames ? Or could it be that im still using beta 3.1 ?

digger

Quote from: Tanks on October 08, 2008, 03:00:09 PM
I was unable to get it to work  - instead it just opened the image url

Could it be that i have incrypted filenames ? Or could it be that im still using beta 3.1 ?

Using custom theme?

puppeter

Im using custom theme... what should i do to make it work?

digger


fals

How can i translate the tooltip text ?
"Click to close image, click and drag to move......"

Can't find any langues string

Have tried http://highslide.com/ref/hs.lang with no luck






500fan.dk - SMF 2.0 ~ custom theme
ls-forum.dk - SMF 2.0.2 ~ custom theme and custom iPhone theme

feline

You find all textstring on the url ..
That, what you mean is restoreTitle

// German language strings
hs.lang = {
   loadingText :     'Lade...',
   loadingTitle :    'Klick zum Abbrechen',
   focusTitle :      'Klick um nach vorn zu bringen',
   fullExpandTitle : 'Zur Originalgröße erweitern',
   fullExpandText :  'Vollbild',
   creditsText :     'Powered by <i>Highslide JS</i>',
   creditsTitle :    'Gehe zur Highslide JS Homepage',
   previousText :    'Voriges',
   previousTitle :   'Voriges (Pfeiltaste links)',
   nextText :        'Nächstes',
   nextTitle :       'Nächstes (Pfeiltaste rechts)',
   moveTitle :       'Verschieben',
   moveText :        'Verschieben',
   closeText :       'Schließen',
   closeTitle :      'Schließen (Esc)',
   resizeTitle :     'Größe wiederherstellen',
   playText :        'Abspielen',
   playTitle :       'Slideshow abspielen (Leertaste)',
   pauseText :       'Pause',
   pauseTitle :      'Pausiere Slideshow (Leertaste)',
   number :          'Bild %1/%2',
   restoreTitle :    'Klick um das Bild zu schließen, klick und ziehe um zu verschieben. Benutze Pfeiltasten für vor und zurück.'
};

Fel

Tanks

#18
Yes im using a custom theme but the instalation was success ! My custom theme only has boardindex - no display file.. and modifications was a succes to boardindex so hmm..

Quote* 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.

This is what happens on my board - when i look at other boards i can see the mod work fine so its not my browser..

I checked the img url on other boards and only thiing diferent from my board is that they have the session code in the url.. my board dont have the session in the attachment url ? Could this be the reason ?

fals

Yes.... as i wrote, i have tried that [adding the codes to index.template.php] - with no luck

Quote from: feline on October 08, 2008, 07:24:05 PM
You find all textstring on the url ..
That, what you mean is restoreTitle

// German language strings
hs.lang = {
   loadingText :     'Lade...',
   loadingTitle :    'Klick zum Abbrechen',
   focusTitle :      'Klick um nach vorn zu bringen',
   fullExpandTitle : 'Zur Originalgröße erweitern',
   fullExpandText :  'Vollbild',
   creditsText :     'Powered by <i>Highslide JS</i>',
   creditsTitle :    'Gehe zur Highslide JS Homepage',
   previousText :    'Voriges',
   previousTitle :   'Voriges (Pfeiltaste links)',
   nextText :        'Nächstes',
   nextTitle :       'Nächstes (Pfeiltaste rechts)',
   moveTitle :       'Verschieben',
   moveText :        'Verschieben',
   closeText :       'Schließen',
   closeTitle :      'Schließen (Esc)',
   resizeTitle :     'Größe wiederherstellen',
   playText :        'Abspielen',
   playTitle :       'Slideshow abspielen (Leertaste)',
   pauseText :       'Pause',
   pauseTitle :      'Pausiere Slideshow (Leertaste)',
   number :          'Bild %1/%2',
   restoreTitle :    'Klick um das Bild zu schließen, klick und ziehe um zu verschieben. Benutze Pfeiltasten für vor und zurück.'
};

Fel






500fan.dk - SMF 2.0 ~ custom theme
ls-forum.dk - SMF 2.0.2 ~ custom theme and custom iPhone theme

Advertisement: