Need help with external javascript

**ctryluv** · 07-18-2013, 03:27 PM

Hi, I have downloading a script from http://javascriptkit.com/script/scri...geviewer.shtml. It took me awhile but I was pretty much able to figure out how to set the caption box where I wanted it, or so I thought. I discovered after I started to add images that the setting worked fine for the first couple of images, but then started getting shorter, so that I had to start editing images in order to make it line up. If you look at the example, you will see two pictures with little caption boxes that say full size image. Down toward the bottom of the page it tells you to edit the caption offset which is what I did, and it worked fine for the first few images but all of the ones after the caption box ends up higher than it should be. I have made sure that my images are all the exact same size. Anyone have any ideas??

**Beverleyh** · 07-18-2013, 04:06 PM

If you post a link to your actual page so we can see the problem you're describing, it will make it easier to offer specific help.

**ctryluv** · 07-19-2013, 10:59 PM

Thanks for replying Beverly. Here is a link to one of the pages that I am using the script on. Not sure if you can get to the .js files or css file from there but if not, let me know and Ill figure out a way to get it here. The link in the post above does have access to the files but you cant see the changes I made to them there. Thanks!!

http://everything-spn.com/monsters.html
Angela

**Beverleyh** · 07-20-2013, 03:54 AM

I don't know it its the *only* problem, but there doesn't appear to be a valid DOCTYPE in use in the web page. You're using HTML5 tags so make sure the top of the doc starts with;

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

and also put this as the first JavaScript, in the <head> section so older IE browsers can utilise html5 tags too;

Code:

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

This might not be the ultimate fix to your problem but a valid and compliant DOCTYPE can sometimes improve things. Once that's in place, see if things look better and retort back.

**ctryluv** · 07-21-2013, 05:26 PM

Hi Beverly, I added the things you told me to add, and the page still looks ok, but it doesn't appear to have changed anything in the spacing. The caption boxes are where they need to be but the images are still the same size as I had them before to make them fit. If I can't fix it, it's not a real big deal. This is a class assignment for one of my college courses so as long as it looks ok I dont think he will have an issue with it. Would still like to get it fixed though, lol. Thanks for all of your help!

**ajfmrf** · 07-21-2013, 10:15 PM

I am not quite sure what you are looking for.But I am using firefox and played with the page a little here:
http://www.web-user.info/test/monsters/monsters.html

When I look at it (FF) the 'view larger image' link is below the image now.Each thumb has the link to the left,below the image.

The spacing looks fine to me though so I am not sure what you are talking about.

**Beverleyh** · 07-22-2013, 08:54 AM

ajfmrf, If you could hold off jumping in while I'm in the middle of helping somebody, that would be great - its pointless us both spending time on something unless you're offering a correction to an answer, have anything informative to add or you are providing further support because the original helper's input has been exhausted. It would also be good to provide an explanation if you have offered a solution rather than ask people to visit your website and hunt for your changes themselves.

--------------------------

Hi ctryluv,

I have the fix for you and I'll provide an explanation to avoid confusion. However, I've just spotted that you do not have the copyright notices for the scripts maintained in your web page, so you must make sure that you reinstate those if you continue using the script - it is in the terms and conditions and a requirement for usage. So where you have this line;

Code:

<script type="text/javascript" src="plusimageviewer1.js"></script>

Change it to this;

Code:

<script type="text/javascript" src="plusimageviewer1.js">
/***********************************************
* Plus Size Image Viewer- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>

Now for the problem which ultimately leads back to this plusimageviewer1.js script. It looks like you've got a bit confused with the coordinates for the caption position, so try making the changes highlighted in this line;

Code:

captionoffset: [5, -35],  //additional offset of caption relative to bottom left edge of image

That will put the captions just inside the grey shadow/border of your images, which you may or may not like but you can tweak them if you wish. If you do, just nudge the caption value up or down a few pixels at a time, and check in a browser between changes, until you're comfortable with which way they're moving (negative value can be confusing even for me so check often to avoid any major screw-ups).

Now there are some other problems with your document that you should also attempt to clean up.

- Remove align="left" from your img tags. This is a deprecated attribute in HTML5.
- Move the internal styles for your body background image into <head> section. At the moment its between the closing </head> tag and the opening <body> tag.
- Remove a few stray "length:143px" from img tags. It looks like you've mixed up the formatting for HTML4 images and HTML5 images;

HTML4 img tags look like this;

Code:

<img src="images/pic.gif" height="50" width="140" alt="an image"/>

Whereas HTML5 img tags look more like this;

Code:

<img src="images/pic.gif" style="height:50px; width:140px" alt="an image"/>

So you should format your images like the HTML5 example

One other thing I noticed was the mixed use of curly/smart and straight/dumb quotation marks in your markup, such as in the link line for your reset.css file and the meta tag for utf-8. The curly/smart ones look like ” - not too clear with the forum font but they're the ones you'd expect to see in typography and typically get transferred into HTML markup when a plain text editor has not been used (ie - if you've copied something direct from Word or from a web pages), but as they can interfere with code, you should change them to straight/dumb quotations marks which look like ".

**ctryluv** · 07-22-2013, 06:55 PM

Hi Beverly, I really appreciate the help on this. I'm not quite sure how to explain it but I'll try. The way I understand it is the line in the .js file that has the captionoffset should set the caption at the exact same place in every image, I'm assuming with the settings I used, it would be 0 px from the bottom left corner, and 145 px from the top of the image. However, it doesn't do that. The page looks fine right now but that is because I had to change some of the image sizes. I kept the width the same at 150 and they started out with a length of 143, but the farther down the page it got, the farther up the caption moved so that it was actually up into the image so I had to resize the length of the image. For example, the last image on the page I had to resize to a length of 117. If you click on the monsters2 link you will see that I had to reset the bottom image all the way down to a length of 65. Otherwise the captions did not sit where they needed to. It's not a real big deal but I really wanted my thumbnails to all be the same size. I did add the copyright in as you suggested. When I tried to replace the img tags with the html5 tag it moved the caption way down the page. I did remove the stray "length:143px" from this page and will get any others on the other pages removed also. I also noticed the curly/smart and straight/dumb quotation marks when I was working with something else and it was screwing it up so I will continue to look for those and get those corrected. Thanks again for your help

**ctryluv** · 07-22-2013, 07:01 PM

Oh, and I also moved the internal styles for the body background where you told me to

**Beverleyh** · 07-22-2013, 07:18 PM

Hi again,

I dont see the changes in the page yet but the size of the thumbnails shouldn't matter - the caption will always appear in the same place, except the values that you were using seemed too big for the script to handle - I'm not sure why though. If you change the line in the js file to the one below, everything will be uniform. I downloaded your page and added further thumbnail images of my own, of all different sizes to test, and this definitely fixes things;

Code:

captionoffset: [5, -35],  //additional offset of caption relative to bottom left edge of image

BTW - your logic for the caption placement is kind-of right, but just from the wrong place. Its position is from the very bottom left corner of a thumbnail image, so the first offset value in the js file (5 in my example above) moves the caption 5 pixels into the image. That's the easier one to get your head around. But the second offset value (-35 in my example above) needs to be a negative value to lift it upwards from the bottom corner. Do you get me? So if the second value is a positive value (no minus sign in front) then it just pushes the caption way down past the bottom of the image so its floating somewhere underneath in nothingness.

With the HTML5 image tag, it shouldn't have affected things in the way you described - it didn't for me here - but if you apply all of the changes to the page that you previously linked to, I will look at it again and then we can work on final fixes to straighten it out. There are a few other things to fix but if you could upload the revised page and js file first, it will make things easier with when we discuss the next steps.