Permlink Replies: 47 - Pages: 4 [ Previous | 1 2 3 4 | Next ] - Last Post: 22 Dec 23, 09:25 Last Post By: Laza Threads: [ Previous | Next ]
Laza

Posts: 1,758
Registered: 6-Sep-2005
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 10 Nov 23, 13:38   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
The centering is so tricky because it behaves differently on small screens and the presence of the buttons also determines how the caption behaves. Here's my solution based on Jeff's:

Edit by JeffTucker: Code for the lightbox caption, custom CSS, and custom Javascript is in the attached file. The forum software mangles it!

Edited by: JeffTucker on 15 Nov 2023, 08:26
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 10 Nov 23, 14:07   in response to: Laza in response to: Laza
  Click to reply to this thread Reply
I still get a little lost in the midst of a flex layout. Inline-block is tricky enough for me.
Laza

Posts: 1,758
Registered: 6-Sep-2005
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 10 Nov 23, 14:33   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Float and vertical align were made for the 90's, when images weren't larger than a letter. We had to hack these features for larger images and content blocks until after 2 decades HTML5 arrived. Sure, flex and grid layouts are hard to comprehend sometimes. I still can't remember when to use "justify-content", "justify-items", "align-content" and "align-items".
jrendant

Posts: 55
Registered: 16-Dec-2007
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 12 Nov 23, 15:34   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Thank you very much for the code.

I have copied and pasted the code from your response into the areas as described. The buttons do show up, but they do not change the picture to B&W and, therefore, not back to color.

I am using the preview button of jalbum after performing a force rebuild (shift F9) within the tool.

Your help is greatly appreciated.

Jim Rendant
jrendant

Posts: 55
Registered: 16-Dec-2007
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 12 Nov 23, 15:54   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
I have tried both Chrome and Firefox. I assume that jalbum uses the default browser to display the preview album.
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 12 Nov 23, 16:05   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
jAlbum uses its own integrated browser, unless you tell it otherwise, and it's completely unreliable. And you can't open a Tiger album by double-clicking its index.html file. Choose Tools > Preferences > Preview, and make it look like this:

JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 12 Nov 23, 20:54   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Laza's code doesn't work for me, either. No grayscale when clicking the button. My original code works.
jrendant

Posts: 55
Registered: 16-Dec-2007
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 13 Nov 23, 13:16   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
The original code you put on the forum didn't work for me.

I checked my browser preferences and they are configured just like yours (by default).
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 13 Nov 23, 13:50   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
This album was made with the code I posted:

(demo album removed)

Does it work?

Edited by: JeffTucker on 26 Nov 2023, 14:18
jrendant

Posts: 55
Registered: 16-Dec-2007
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 03:36   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Yes that does work however the code for me does not.

You set the filter:grayscale(1) should it be 100?
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 03:53   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
If it doesn't work for you, that can only mean that you have entered the code incorrectly, or not in the correct places. Double-check where you're putting in the code, and don't try to type it in - just copy and paste from my post, above.
Laza

Posts: 1,758
Registered: 6-Sep-2005
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 14:39   in response to: jrendant in response to: jrendant
  Click to reply to this thread Reply
It's odd it didn't work for you. Here's the uploaded album:
https://laza.jalbum.net/Tiger%203/Architecture/index.html
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 15:04   in response to: Laza in response to: Laza
  Click to reply to this thread Reply
Laza wrote: >
It's odd it didn't work for you.

Not odd at all. The code you posted above for the lightbox caption isn't the same as the code you actually used in the example album. ;)

The forum software mangles it. Refer to file attachments, below.

Edited by: JeffTucker on 15 Nov 2023, 08:28
JeffTucker

Posts: 8,127
Registered: 31-Jan-2006
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 15:25   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Attachment caption.txt (227 bytes)
The forum software makes it almost impossible to post the correct lightbox caption template coding - it insists upon "interpreting" things, instead of displaying them in clear text.

Open the attached file in a simple text editor, then copy and paste from there.
Laza

Posts: 1,758
Registered: 6-Sep-2005
Re: Mouse over effects on the Site options of the tiger SKIN
Posted: 14 Nov 23, 16:26   in response to: JeffTucker in response to: JeffTucker
  Click to reply to this thread Reply
Oh, sorry, I was sure it was the final version.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums