[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!
Scam Warning
Locked
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

Inline attachments are actually built-in BBCode; and the <br /> is coming as the result. There are subtle hints in bbcode.php, but I am way out of my depth here. Obviously, not all BBCode triggers a newline - e.g., bold doesn't, nor does italic. But "attachment" does, when inserted via the inline button.

What would be sweet, is if I could suppress a newline for inline attachments - and add a BBCode for a newline, e.g., at the end of a row of inline thumbnails.

Dan
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

I edited this snippet in theme/content.css:

Code: Select all

div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	display: block;
to this:

Code: Select all

div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	display: inline;
And the <br /> is removed from the source! Still, the placement of thumbs is vertical, and not horizontal:

http://www.mcweton.net/farmerforum/view ... p=206#p206

There's some other CSS element that's governing the behavior, but I don't know what it is. I have to find a way to change the behavior of inline-attachments, without altering the behavior of other page components... I sure wish an expert would weigh in here, I'm fumbling.

Dan
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

OK, now I'm studying the tutorials on w3schools.com. Great stuff! And I read this for the <div> tag:
W3 Schools wrote:Tip: The div element is very often used with CSS to layout a web page.
Note: Browsers usually place a line break before and after the div element.
Waydaminit! Could that be it?

Jonni, in your Mod you suggest replacing this...

Code: Select all

<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
with this:

Code: Select all

<!-- IF _file.S_THUMBNAIL -->
		<div class="highslide-gallery">
I bet the <div> that's coming with the highslide class, is what's causing my line break when not encapsulated in an attachbox. But I've got to get ready for work now...

Does Highslide require a <div> there to work properly? Or, was that just a choice?

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

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

Post by 4_seven »

may a way: find highslide-gallery class in relevant css-file and enter..

Code: Select all

position: relative;
top: -5px;
and play with the value in negative -5px; or positive range 5px; ;)

- clear all board- and browser-caches after that.
Current Mods | Mod Base | php(BB) programming | No help via PM
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

Thanks! I'll try that tonight.

Dan
panhead
Registered User
Posts: 950
Joined: Sat Dec 20, 2003 8:17 pm

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

Post by panhead »

I'm trying to figure out how to configure this add-on. I only want to show the slideshow, what must I do to achieve that?
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

4_seven wrote:may a way: find highslide-gallery class in relevant css-file and enter..

Code: Select all

position: relative;
top: -5px;
and play with the value in negative -5px; or positive range 5px; ;)

- clear all board- and browser-caches after that.
Wow - there are no less than 8 classes containing highslide-gallery in highslide.css:

Code: Select all

.highslide-gallery ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
background: #ededed;
margin: 2px;
line-height: 0;
overflow: hidden;
}
.highslide-gallery ul a {
position: absolute;
top: 50%;
left: 50%;
}
.highslide-gallery ul img {
position: relative;
top: -50%;
left: -50%;
}
html>/**/body .highslide-gallery ul li {
display: table;
text-align: center;
}
html>/**/body .highslide-gallery ul li {
text-align: center;
}
html>/**/body .highslide-gallery ul a {
position: static;
display: table-cell;
vertical-align: middle;
}
html>/**/body .highslide-gallery ul img {
position: static;
}
Which do you suggest I modify?

Dan
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

shortmort37 wrote:OK, now I'm studying the tutorials on w3schools.com. Great stuff! And I read this for the <div> tag:
W3 Schools wrote:Tip: The div element is very often used with CSS to layout a web page.
Note: Browsers usually place a line break before and after the div element.
Waydaminit! Could that be it?

Jonni, in your Mod you suggest replacing this...

Code: Select all

<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
with this:

Code: Select all

<!-- IF _file.S_THUMBNAIL -->
		<div class="highslide-gallery">
I bet the <div> that's coming with the highslide class, is what's causing my line break when not encapsulated in an attachbox. But I've got to get ready for work now...

Does Highslide require a <div> there to work properly? Or, was that just a choice?

Dan
I modified the code to use list tags, instead of div's - and, still the thumbs are vertical. But, not because of the highside class (this is the rendered "view source"):

Code: Select all

<div class="content"><div class="inline-attachment"> 
		<dl class="highslide-gallery"> 
			<dt><a href="./download/file.php?id=151&mode=view/IMG_0712.JPG" class="highslide" onclick="return hs.expand(this, { captionText: '' } )"><img src="./download/file.php?id=151&t=1" alt="IMG_0712.JPG" title="IMG_0712.JPG (549.5 KiB) Viewed 11 times" /></a></dt> 
			<dd class="highslide-caption"></dd> 
      		</dl> 
   		</div><div class="inline-attachment"> 
		<dl class="highslide-gallery"> 
			<dt><a href="./download/file.php?id=150&mode=view/IMG_2.JPG" class="highslide" onclick="return hs.expand(this, { captionText: '' } )"><img src="./download/file.php?id=150&t=1" alt="IMG_2.JPG" title="IMG_2.JPG (443.97 KiB) Viewed 11 times" /></a></dt> 
			<dd class="highslide-caption"></dd> 
      		</dl> 
   		</div></div> 
There's still a <div> in there between thumbs that's flummoxing up the works. The <div> is coming from inline-attachment. But, this is what is in content.css:

Code: Select all

/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	display: inline;
	margin-bottom: 4px;
}
"inline", not "block" - the latter resulting in a <div>. So, where is it coming from?! tweaks.css, I bet:

Code: Select all

/* Nice method for clearing floated blocks without having to insert any extra markup (like spacer above)
   From http://www.positioniseverything.net/easyclearing.html 
#tabs:after, #minitabs:after, .post:after, .navbar:after, fieldset dl:after, ul.topiclist dl:after, ul.linklist:after, dl.polls:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}*/
Now to play with that...

Dan
User avatar
shortmort37
Registered User
Posts: 656
Joined: Sat Aug 26, 2006 8:40 pm
Location: Upper Darby, PA, USA
Name: Dan Morton
Contact:

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

Post by shortmort37 »

shortmort37 wrote:There's still a <div> in there between thumbs that's flummoxing up the works. The <div> is coming from inline-attachment. But, this is what is in content.css:

Code: Select all

/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	display: inline;
	margin-bottom: 4px;
}
"inline", not "block" - the latter resulting in a <div>. So, where is it coming from?! tweaks.css, I bet...
Nope. That's not it, either. At a loss.

Dan
Muppi
Registered User
Posts: 11
Joined: Tue Sep 21, 2010 7:12 am

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

Post by Muppi »

I've got a question. If I want to shrink the thumbnails how and where can I do that? look at this Picture
http://www.cyber-skynet.com/Focus.jpg.I've got a question. If I want to shrink the thumbnails how and where can I do that? In the ACP I have already set a small size
sevenalive
Registered User
Posts: 437
Joined: Thu Feb 07, 2008 4:45 am

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

Post by sevenalive »

The pics must be added as an attachment, not using the img bbcode
Muppi
Registered User
Posts: 11
Joined: Tue Sep 21, 2010 7:12 am

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

Post by Muppi »

I have attached the image file size in the ACP for are set to 200x maximum but my thumbnails in part, 300x400 why ?
sevenalive
Registered User
Posts: 437
Joined: Thu Feb 07, 2008 4:45 am

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

Post by sevenalive »

You have to go to ACP>Attachment settings

Maximum thumbnail width in pixel: 320px < change this value.

You also need to make sure your Imagemagick path is correct.
Muppi
Registered User
Posts: 11
Joined: Tue Sep 21, 2010 7:12 am

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

Post by Muppi »

I have no imagegick path !My Server iss by an ISP !
tekknodevil
Registered User
Posts: 69
Joined: Mon Feb 08, 2010 6:53 pm
Location: Dresden, Germany
Contact:

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

Post by tekknodevil »

Thanks for this fantastic mod. Works fine in my board.

I have one question:

Is it possible to use this mod in my portal ? I use the Board3 Portal V1.0.6 ( http://www.phpbb.com/customise/db/mod/board3_portal/ ) and the attached images are shown as an "normal" attachment and if i click this images, they open in the same browser window.

http://content.screencast.com/users/tek ... 4_1040.png

Thanks.
Locked

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