Custom Journal Page Images [Sitemap] - Digital Grin Photography Forum

View Full Version : Custom Journal Page Images

timnosenzo

Apr-09-2009, 08:41 AM

I have 2 custom journal pages that I use for an "About" page and a "Contact" page. I used the advice in this thread to set them up without navigation, etc: http://www.dgrin.com/showthread.php?t=23874

Here's my question. I have a JS hack to make it so the images aren't "clickable" that looks like this:

/*** about page ***/
function doOnLoad() {
if (window.AlbumID && (window.AlbumID == "5905882")) //
removeLinkFromImg();
}

function removeLinkFromImg()

{

var links = document.getElementsByTagName("A");

for (var i = 0; i < links.length; i++)

{

var link = links[i];

var divElm = link.parentNode;

if (!divElm)

continue;

divElm = divElm.parentNode;

if (!divElm)

continue;

if (divElm.className.indexOf("photo")<0)

continue;

link.href = "javascript:void(0);";

}

}
Now, I need this applied to both my "Contact" page and my "About" page, so I basically pasted this JS in my JS box twice, using the proper album number. For some reason, it is only working in the "About" page--I can still click on the image in the "Contact" page. Is there a better way for me to do this, that will make it so those images are not clickable? :dunno FWIW, I don't mind if this is applied to ANY Journal page I make on my site, because I would only ever use that style for this sort of thing.

Here's my site:
http://www.timnosenzophoto.com/

Here's the "About" page:
http://www.timnosenzophoto.com/gallery/5905882_uUU7Y

Here's the "Contact" page:
http://www.timnosenzophoto.com/gallery/5910169_KdVAw

Please help, it sort of drives me crazy... especially since my header looks broken when you click on the photo in the "Contact" page. :cry

Ok, part 2, which is less important but it would be cool if I could fix it. Is there anyway to get the top of the text box to line up with the top of the photo (circled in picture below).

27064

Thanks in advance for any help you can offer!!

Tim

Erick L

Apr-09-2009, 09:42 AM

I ran into the same problem. Now, this is what I have and it works:

function doOnLoad() {
if (window.AlbumID && (
window.AlbumID == "xxxxxxx" ||
window.AlbumID == "xxxxxxx" ||
window.AlbumID == "xxxxxxx"

))
removeLinkFromImg();
}

function removeLinkFromImg()

{

var links = document.getElementsByTagName("A");

for (var i = 0; i < links.length; i++)

{

var link = links[i];

var divElm = link.parentNode;

if (!divElm)

continue;

divElm = divElm.parentNode;

if (!divElm)

continue;

if (divElm.className.indexOf("photo")<0)

continue;

link.href = "javascript:void(0);";

}

}

Erick L

Apr-09-2009, 09:46 AM

And to align your text, remove the <p> tag around it.

timnosenzo

Apr-09-2009, 10:06 AM

I ran into the same problem. Now, this is what I have and it works:

Perfect, it works!! Thank you! :clap

timnosenzo

Apr-09-2009, 10:08 AM

And to align your text, remove the <p> tag around it.

Hmm, this didn't work. I don't know if it matters, but I have divs in there to help format the text. :dunno

denisegoldberg

Apr-10-2009, 04:28 AM

Ok, part 2, which is less important but it would be cool if I could fix it. Is there anyway to get the top of the text box to line up with the top of the photo.
Add this CSS to align the start of the caption with the top of the photo:

#journal .journal_entry .caption {
padding:0; margin:0;
}
If you'd also like to add a little space between the text and the photo, try this CSS (adjusting the px to match what you want) - and thanks to jfriend for supplying this in another post, very useful.
.journal_entry .photo.left {margin-right: 20px !important;}
.journal_entry .photo.right {margin-left: 20px !important;}
--- Denise

lisasolonynko

May-05-2009, 11:16 PM

DonMB

May-12-2009, 06:24 PM

Hmmmm, I have tried both of these but can't seem to get it to work. I have 3 pages that are in "journal" format, but can't get the images to be "unclickable", nor can I get the text to align with the top edge of the photo.

This is one of the pages I am trying to get it to work on... http://lisasolonynko.smugmug.com/gallery/6772114_gwxvR

I am betting that my butterfingers have added or deleted something that will make it all come together. ARG. Thanks a ton for any help you can give me!

Lisa

I had some trouble too, but I got it working somehow. I think I might have been missing a curly brace or something.

In any case, there's at least one clear problem with how you have your javascript. I see this:

if (window.AlbumID && (window.AlbumID == "gallery/6772114_gwxvR" || window.AlbumID == "xxxxxxx" || window.AlbumID == "xxxxxxx" etc... You want the window.AlbumID == "gallery/6772114_gwxvR" part to be like this: window.AlbumID == "6772114" <-- might work with the _gwxvR also, but I'm not using it for my site.

vt1122

May-13-2009, 03:32 PM

I have been trying this on my site as well for 3 journal galleries. Can't seem to make it happen.

I'm assuming this code goes in the top java script box.

timnosenzo

May-13-2009, 04:25 PM

This thread actually doesn't show all of the steps. :uhoh

Here's how I originally created the pages:

http://www.dgrin.com/showpost.php?p=209813&postcount=12

Which worked fine for a while. But once I started having trouble with it, I posted this thread and eventually updated the JS with what was posted above. You still need to add stuff to your Body Tag and CSS to get the whole deal. Now it's totally money. :lust

Hope that helps!

vt1122

May-13-2009, 05:03 PM

Thank you, that works much better now. A couple more questions if you don't mind.

I used the java code for three galleries and in the 2nd two the pointer still turns to a hand when you go over the photo. Do I have to repeat the CSS code as well?

Is there a way to get rid of the mouse over?