[RC] Highslide 4.1.8 Zoom/Slideshow/Watermark (Gallery)

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment!
Get Involved
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

[RC] Highslide 4.1.8 Zoom/Slideshow/Watermark (Gallery)

Post by jonnilaumann »

MOD Title:
HighSlide 4.1.8 Attachment MOD

MOD Description:
-Zooming on Thumbnails in attachment. Thumbnails open in a nice popup layer. Large images fits screen (resized) with option to view and download orig Image fullsize.

-Slideshow and Thumbstrip.(Optional-easy to remove)
-File Comment on Image when Zooming/Highslide (Optional-easy to remove or move under)

-MOD effects all thumbnails from attached images.(GD lib/Imagemagic).NOT BBcode Image

Download - 4.1.8 Mod - v4.0.5:
http://www.parafun.dk/paragliding/downl ... hp?id=1892
-watermark code only in overall_header
-Optical Watermark with hs.registerOverlay (Torstein Hønsi pointed out in E-mail)
-Optical Watermark hide on mouseout(optional)
-Overall_header.html now hs.wrapperClassName = 'borderless';
-"File Comment" hide on mouseout (hs.captionOverlay)
-"File Comment" default ON image
-This MOD got an URL on highslide.com (thanks Torstein)

Demo:
(click any thumbnail to see this Highslide 4.1.8 Mod effect):

My Live Forum (3.0.4)
http://www.parafun.dk/paragliding/viewt ... p=190#p190



Screenshots:
Image

Image

-Controls, filecomment and watermark.. are ALL hide on mouseout. Disappear when mouse outside image.
-Thumbstrip, filecomment and watermark are all very easy to remove(hide)

Credits:
Thanks to Torstein Hønsi for providing us with the Highslide script
Thanks to Michaelo who provide the IE fix
Thanks to 4_seven for Help,implementation in AAW and the .htaccess php_limit increase Tweak
Thanks to sevenalive for DEV,help on ModX and Testing

MOD installation notes:
ACP->Attachment Settings->
Create thumbnail: "Create a thumbnail in all possible situations"..MUST! set to" YES"

Other info:
-You can also use the "highslide-with-gallery.min.js", and test if it will execute faster.

Barebones:
http://highslide.com/index.htm
-See here some off the endless zoom possibilities you have with this "4.1.8 Attachment MOD" in phpbb

Highslide Changelog
http://highslide.com/changelog.php
Last edited by jonnilaumann on Thu Jul 01, 2010 9:38 pm, edited 145 times in total.
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Additional/optional tweaks/hints to alter

Post by jonnilaumann »

/////////////////////// LANGUAGE CHANGE On Highslide buttons and shortcuts //////////////////
Here you find translations already done:
https://highslide.com/forum/viewtopic.php?f=3&t=2119

or.....

Open:
...../highslide/highslide-with-gallery.js

Change to your language there:

lang : {
cssDirection: 'ltr',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
focusTitle : 'Click to bring to front',
fullExpandTitle : 'Expand to actual size (f)',
creditsText : 'Powered by <i>Highslide JS</i>',
creditsTitle : 'Go to the Highslide JS homepage',
previousText : 'Previous',
nextText : 'Next',
moveText : 'Move',
closeText : 'Close',
closeTitle : 'Close (esc)',
resizeTitle : 'Resize',
playText : 'Play',
playTitle : 'Play slideshow (spacebar)',
pauseText : 'Pause',
pauseTitle : 'Pause slideshow (spacebar)',
previousTitle : 'Previous (arrow left)',
nextTitle : 'Next (arrow right)',
moveTitle : 'Move',
fullExpandText : '1:1',
number: 'Image %1 of %2',
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'
},

OR!!! add to overall_header.............

hs.lang = {
cssDirection: 'ltr',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
........
...........
...........
};

/////////////////////////////// Highslide.css Tweaks ////////////////////////////////////
open:
highslide/highslide.css

/* small margin on thumbnails in attachment */
.highslide img {
margin-right: 10px; /* attacmentbox thumbnail margin */
or:
../theme/content.css
.attachbox dd {float: left; margin-right: 10px;


/* Add following to Put the image number in front of the caption */
.highslide-number {
display: inline;


//////PROSILVER- Stricter layout and control of the "file comment" under thumbnails in attachment(box) /////
...I use this tweak on my forums.Why?:
-When users write file comment in only some attachment, it messes up strict layout in attachmentbox.
-I use a given height to cover 3 lines in file comment under thumbnail.
-I use a given width to cover when user write a looooong comment.

open:
.../styles/prosilver/template/attachment.html
find:

Code: Select all

		<!-- IF _file.COMMENT -->{_file.COMMENT}<!-- ENDIF -->
	<!-- ENDIF -->
replace with:

Code: Select all

		<div class="highslide-comment"><!-- IF _file.COMMENT -->{_file.COMMENT}<!-- ENDIF --></div>
	<!-- ENDIF -->


Open:
.../highslide/highslide.css

add new entry :

Code: Select all

.highslide-comment {
    background: none;
    color: gray;
    font-weight: bold;
    width: 220px; /* change this*/
    height: 40px;
    border: none;
    overflow: auto;
}

//////////// Increase php_limit (server tweak)- to allow larger attached images in phpbb /////////
credits: 4_seven
for the .htaccess php_limit increase

open ..../your_forum_folder/, and find:
.htacces
(can be hidden)

add (anywhere):

Code: Select all

php_value memory_limit 128M
OR!!..

Code: Select all

php_value memory_limit 144M
128M or 144M (or higher) must be testet on your specific server.Set first to 128M in .htacces-> Upload large pics like 2500x2000,4000x3000,5000x3000px 2-5Mb)...Set to 144M->test again..etc...
This tweak can also be done on remote Hosted Servers like a Webhotel. Usually you only get around 32Mb on cheap webhotels. This tweak increases limit on most servers. Dont mind if a php-test still shows 32Mb, test it with a large attacment image. Dont buy more limit if this tweak works!



///////////// FOLLOWING IS PHPBB TWEAKS I MADE TO GET A (no Mod) GALLERY //////////////////
///////////// WORKS NICE WITH my Highslide 4.1.8 Mod (zoom on thumb)/////////////////
/////////////////////////////////////phpbb image gallery tweak/////////////////////////////////

Make these additional phpbb tweeks to show more pictures in attachment (box):
Screenshot after tweak:
Image
Open:
..styles/......../theme/content.css

//thumbnails side-by-side instead of one row
.attachbox {float: left;width: 100%;

.attachbox dd {float: left;
(add: "float:left" and remove: "clear: left;"!!!!!!!!)


/////////////// following tweak will remove avatar,pm and other info to the right. ////////////////
like this:
Image

Open:
..styles/......../theme/content.css

.postbody { width: 98%;
.postprofile {display: none;}

//remove online icon to the right:
open:
......./styles/template/viewtopic_body

find:

Code: Select all

<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->
replace with:

Code: Select all

<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --><!-- ENDIF -->

/////////// Same thumbnail height in attachment.(Looks better when thumb is side by side: /////////
This also prevent upright images from messin up all layout

Image
open:
highslide/highslide.css

add in:
.highslide img {
height: 180px; /*aprox height If ACP->Attachment-> thumbnail width=320px */


-You NEED to calculate best height according to your ACP->Attachment-> thumbnail width
(((ACP thumbnail width):4)x3)-25%
-this calculation will show nice 4:3 and 16:9 thumbnails
Last edited by jonnilaumann on Thu Jan 28, 2010 10:29 pm, edited 93 times in total.
User avatar
4_seven
I've Been Banned!
Posts: 5155
Joined: Wed Apr 30, 2008 1:41 am

Re: [ALPHA] Higslide 4.1.8 MOD

Post by 4_seven »

good work ;)
Current Mods | Mod Base | php(BB) programming | No help via PM
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Optical Highslide watermark tweak

Post by jonnilaumann »

OPTICAL WATERMARK ONLY!! does NOT show ...when viewing after download

demo:http://parafun.dk/paragliding/index.php
(watermark png in demo is 120x120px, made with Incscape and converted in GIMP)

To change watermark:
Upload a 120x120px png to: ".../highslide/graphics/"
Note:
-Best for CrossBrowsing (IE fix :x ) is a SQUARE(same height and width) 8bit or 24bit (indexed 256color) transparent png with NO gamma
-If other watermark wanted, then upload like 160x160px or 200x200px and change(important!) accordingly in overall_header

Note. Watermark is just a emty div, and png with transparent bg. Watermark will NOT show on image when/after user download it.

....For watermark on downloaded images use:
AAW MOD from 4_seven
http://www.phpbb.com/community/viewtopi ... &t=1729045

AAW (0.1.3 +) also have implementet this MOD, with updatet Highslide 4.1.8, this means you can do all my tweaks in AAW too. ;) Both MODS have the same and only one "highslide" folder for all styles, placed in forum folder :twisted:
Last edited by jonnilaumann on Wed Feb 10, 2010 2:03 pm, edited 20 times in total.
lovelysummer
Registered User
Posts: 437
Joined: Fri Mar 20, 2009 1:49 pm

Re: [ALPHA] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by lovelysummer »

Would you please tell me does the mod can resize those attachements had already been posted ?

Thankyou :)
User avatar
4_seven
I've Been Banned!
Posts: 5155
Joined: Wed Apr 30, 2008 1:41 am

Re: [ALPHA] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by 4_seven »

i think yes. same as the tweak by jonnilaumann in first post of aaw...
Current Mods | Mod Base | php(BB) programming | No help via PM
User avatar
ashras99
Registered User
Posts: 441
Joined: Mon Dec 19, 2005 9:09 pm

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by ashras99 »

I am using highslide.js in place of highslide_with_gallery.js

everything else is fine... except no diming of background is working and if clicking outside the image.. then not closing the image window.

these 2 features not supported in highslide.js ?
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by jonnilaumann »


Dimming is not an option in highslide.js !!!


-I can.. but dont want to implement dimming options in highslide.js in this MOD, because of easy update when new version..That would be a request just done for you..or maybe ask Hønsi(highslide.com) to implement Dimming in highslide.js

I will come back and put here in topic...when solved best and easiest way to remove: thumbstrip,controls, comment :D

Then highslide-with-gallery.js will look just like highslide.js

...but with the dimming option and even better all the hidden keyboard functions for gallery still there (space=play/pause, arrow right=next...etc.....)
Last edited by jonnilaumann on Thu Jan 21, 2010 7:03 pm, edited 4 times in total.
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Remove:Thumbstrip,controls,number,Watermark,comment

Post by jonnilaumann »

Remove Thumbstrip->
Open: ../template/overall_header
Find:

Code: Select all

// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 4000,
		repeat: false,
		useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: .50,
			position: 'top center',
			hideOnMouseOut: true
		},
		thumbstrip: {
			position: 'middle left',
			mode: 'vertical',
			relativeTo: 'viewport'
		}
Remove:

Code: Select all

,
		thumbstrip: {
			position: 'middle left',
			mode: 'vertical',
			relativeTo: 'viewport'
		}
/////////////////////////////////////////////////////////////////////////////////////////////////

Remove Controls->
Open: ../template/overall_header
Find:

Code: Select all

useControls: true,
Replace with:

Code: Select all

useControls: false,
/////////////////////////////////////////////////////////////////////////////////////////////////

Remove Image Number->
Open: ../template/overall_header.html
Find:

Code: Select all

hs.numberPosition = 'caption';
Replace with:

Code: Select all

//hs.numberPosition = 'caption';
/////////////////////////////////////////////////////////////////////////////////////////////////

Remove Watermark->
Open: .../template/overall_header.html
remove:

Code: Select all

      // Adding the Watermark
	hs.registerOverlay({
	html: '<div class="watermark" onclick="return hs.close(this)" title="Close" style="width:120px; height: 120px; background: url(highslide/graphics/watermark.png)"></div>',
	hideOnMouseOut: true,
	opacity: 0.4,
	repeat: false,
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
	})
..or just remove the watermark.png from .../highslide/graphics/
..or add " visibility:hidden; " instead, and use the transparent div/# to an URL
/////////////////////////////////////////////////////////////////////////////////////////////////

Remove File Comment on/under zoomed image->

Open: ../template/attachment.html
Find:

Code: Select all

onclick="return hs.expand(this, { captionText: '<!-- IF _file.COMMENT -->{_file.COMMENT}<!-- ENDIF -->' } )">
replace with:

Code: Select all

onclick="return hs.expand(this)">
Last edited by jonnilaumann on Wed Feb 03, 2010 10:11 am, edited 14 times in total.
azzurri
Registered User
Posts: 910
Joined: Fri Jul 21, 2006 7:48 pm

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by azzurri »

Wow, amazing mod! This is going to be a huge hit no doubt. I have to try it out right away!

3 questions...

The slideshow in the header doesnt show up at all. What am I doing wrong.

And how did you create your photo gallery on your page? It's so simple and nice.

Why is gallery skipping images that dont need enlargement? It would be a bit better if all pictures were included in the gallery.
Last edited by azzurri on Tue Jan 19, 2010 1:56 pm, edited 1 time in total.
User avatar
ashras99
Registered User
Posts: 441
Joined: Mon Dec 19, 2005 9:09 pm

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by ashras99 »

jonnilaumann wrote:
Dimming is not an option in highslide.js !!!


-I can but dont want to implement dimming options in highslide.js in this MOD, because of easy update when new version....ask Hønsi(highslide.com) to implement in highslide.js

I will come back and put here in tpoic...when solved to remove: thumbstrip,controls, comment :D

Then highslide-with-gallery.js will look just like highslide.js

...but with the dimming option and even better all the hidden keyboard functions for gallery still there (space=play/pause, arrow right=next...etc.....)
you are right, but we don't need gallery buttons, thumbnails then using a bigger size version doesn't make sense. For one feature of dimming we have to use... highslide-with-gallery. Even don't add in highslide.js then tell us the code to add...?
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by jonnilaumann »

The slideshow in the header doesnt show up at all. What am I doing wrong.
-do you mean the buttons?
-try to move your mouse around on image, buttons are "hide on mouse out"

The buttons for slideshow is not in header, its ON the image(borderless dark).

If buttons wanted in header.Like
http://highslide.com/examples/gallery-c ... ading.html
then->
Download 4.1.8 orig .css from highslide.com, add wrapperClassName controls-in-heading to css.

open .../overall header:
find:

Code: Select all

hs.wrapperClassName = 'borderless';
replace with:

Code: Select all

hs.wrapperClassName = 'controls-in-heading';
And how did you create your photo gallery on your page? It's so simple and nice.
-I have NO Gallery Mod installed...hehe

-follow my Tweaks and maybe install:
First Topic [attachment] on Forum Index(small vertical thumbnails next to each topic in a forum):
http://4seven.kilu.de/forum/phpbb3/view ... ?f=8&t=337
and/or:
[DEV] Last X [attachments] on Board Index or/and Forum
(Horizontal crawl script=sliding thumb and/or Standard=static..on board index or/and forum)
(mod also have option for java screen size detection.)
http://4seven.kilu.de/forum/phpbb3/view ... ?f=8&t=331
Why is gallery skipping images that dont need enlargement? It would be a bit better if all pictures were included in the gallery.
ACP->General->Attachment settings->
Create thumbnail:
Create a thumbnail in all possible situations:Yes

Minimum thumbnail file size:
Do not create a thumbnail for images smaller than this.(change this to smaller or 0)
Last edited by jonnilaumann on Thu Jan 28, 2010 9:08 pm, edited 16 times in total.
User avatar
jonnilaumann
Registered User
Posts: 56
Joined: Mon Nov 30, 2009 12:32 am

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by jonnilaumann »

but we don't need gallery buttons, thumbnails then using a bigger size version doesn't make sense. For one feature of dimming we have to use... highslide-with-gallery. Even don't add in highslide.js then tell us the code to add...?
Try search word "dimming" in highslide-with-gallery.js -> you will see what i mean
(but really think easier just to remove: thumbstrip and controls.see tweak above ):
Last edited by jonnilaumann on Tue Jan 19, 2010 4:50 pm, edited 3 times in total.
azzurri
Registered User
Posts: 910
Joined: Fri Jul 21, 2006 7:48 pm

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by azzurri »

Thank you!

What I mean is, the slideshow that is showing up in your header on your page, doesnt show up at all on my page on the index (header).

Also, what kind of photo gallery are you using on your site? It's great! :)

Thank you for doing this.
User avatar
ashras99
Registered User
Posts: 441
Joined: Mon Dec 19, 2005 9:09 pm

Re: [RC] Highslide 4.1.8 Attachment Slideshow/Gallery MOD

Post by ashras99 »

if need to require to add so much code... then highslide-with-gallery.js is fine :)

Return to “[3.0.x] MODs in Development”