Neptune: Info Page questions ...

jret

Posts: 112
Registered: 5-Mar-2009

Neptune: Info Page questions
Posted: 14 Jan 24, 20:34

Is it possible to display the same background image on the Info Page?
LINK to test album. I would like the background image on the index page to also be displayed (full page) on the Info Page. The primary background is a file, bg3.jpg and it also needs to be the background of the info box, currently white to show the contrast. I'm hoping this is a simple CSS solution, but I can't figure out how to implement it. Studied it, read up on it, tried a variety of things, but a solution eludes me.

Second question: can a hyperlink be added to the image in the info box. I know how to add it if the image is in the text but would prefer to leave the image as it is.

This is the final album of a several in my tuband.com site. Since it's more unique in content I'm attempting a more unique look than the other albums.

Thanks in advance.

JeffTucker

Posts: 8,297
Registered: 31-Jan-2006

Re: Neptune: Info Page questions
Posted: 14 Jan 24, 21:55

in response to: jret

Correct

jret wrote:
The primary background is a file, bg3.jpg and it also needs to be the background of the info box, currently white to show the contrast.

OK, easy one first. In the Code > CSS section, add:

.ja-ipbox > div > div {background: url(bg3.jpg) center repeat fixed;}

I need to mull over the others, since they're not as straightforward as you might imagine. I've got some sneaky ideas, but I'll need to create a test project to work them out.

ETA: In your existing project, just replace background-color: white; with the CSS shown above.

JeffTucker

Posts: 8,297
Registered: 31-Jan-2006

Re: Neptune: Info Page questions
Posted: 14 Jan 24, 23:12

in response to: JeffTucker

How am I doing, so far?

(demo album removed)

First, why is using the theme image (the abstract art with tuba bells) on the info page tricky? Because it's not being used as a simple background image on the main index page - it's being used within a defined page element, and is then being controlled by a parallax script. That element, and that script, don't exist on the info page.

So why not just attach that image as a background image on the info page? Because there's only one CSS file for the album, so if you attach that image to <body> or <html>, it will apply to the main index page, as well as the info page, and will be a mess.

One little side problem: using the theme image on the info page makes the "Return to index page" icon damned difficult to see.

Turning the info page image into a clickable link is tricky simply because the page isn't structured to do that (I should probably add that option to the skins).

jQuery to the rescue. We can't just plug some scripting stuff into Code > HTML, again, because it would apply to all pages in the album, not just the info page. But guess what we can do. We can plant Javascript in the info page text itself! It's an offense against dog and man, but it's actually valid HTML.

I also stuck the "Return to index page" icon into the info page text, so it's much easier to find. I left it in its usual location, as well - no harm.

(next post....)

Edited by: JeffTucker on 17 Jan 2024, 17:41

jret

Posts: 112
Registered: 5-Mar-2009

Re: Neptune: Info Page questions
Posted: 14 Jan 24, 23:12

in response to: JeffTucker

seemed to work better with quotes around bg3.jpg
I've also used background:transparent which also works since the main background is already defined as bg3.jpg. Probably won't work with an image on the Info Page.

In terms of coding correctly, is one method preferable over the other? Should I avoid background:transparent?

page has been updated.

jret

Posts: 112
Registered: 5-Mar-2009

Re: Neptune: Info Page questions
Posted: 14 Jan 24, 23:16

in response to: JeffTucker

doing great, as expected ... LOL.

Yes, the return icon is problematic. That's why I asked how to add a link to the image inside the IP box. Make the return icon non-display and click the image to return (my little easter egg). Not as elegant but an EXIT button can be placed at the end of the text. Already tried that but don't particularly care for the "look".

JeffTucker

Posts: 8,297
Registered: 31-Jan-2006

Re: Neptune: Info Page questions
Posted: 14 Jan 24, 23:17

in response to: JeffTucker

So, how does this all end up looking? Tough to edit, because you have to be careful about messing up the Javascript, so be careful:

<img style='cursor:pointer;' src='res/index.svg' alt='' title='Return to index page'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt id aliquet risus feugiat in ante metus dictum. Vitae congue eu consequat ac felis donec et odio. Vestibulum lectus mauris ultrices eros. Adipiscing elit duis tristique sollicitudin. Non tellus orci ac auctor augue mauris augue neque gravida. Dignissim enim sit amet venenatis urna cursus eget nunc. Congue nisi vitae suscipit tellus mauris.
<script>$('body').css({'background': 'url(ja-theme.jpg) center/cover'});$('.ja-ipimage').wrap($('<a>', {href: 'https://tuband.com',title: 'Visit tuband.com'}));</script>

The magic is in the first line, which puts the nav icon in the box, and the last line, which takes care of the other finagles. You can, of course, change the target URL of the info page image, and/or its tooltip, but be careful!

Edited by: JeffTucker on 14 Jan 2024, 17:19 - fighting with the forum software

jret

Posts: 112
Registered: 5-Mar-2009

Re: Neptune: Info Page questions
Posted: 15 Jan 24, 02:12

in response to: JeffTucker

Thanks ... worked out great. I would never have come up with a solution without your help.

JeffTucker

Posts: 8,297
Registered: 31-Jan-2006

Re: Neptune: Info Page questions
Posted: 15 Jan 24, 03:18

in response to: jret

Using Javascript in a somewhat unorthodox fashion is not something one would normally think about. Fortunately, I'm not normal.