Javascript Repeating in other areas of my website even without the code

This site is best viewed in a modern browser with JavaScript enabled.

Javascript Repeating in other areas of my website even without the code

joshechevarria

Hi
I've been working on my website www.joshuaechevarria.com

I wanted to create popup windows for some of my images so that when you hover over the image and pop up box will show up and give a description or something. Anyway I managed to figure that out for one image. When I went to go repeat that method I removed my previous attributes such as the images and description BUT when I hover over that second image the same pop up shows up : please see the script below.

This was the successful script. If you go to my site you will see it in the cinematography section on the bottom middle there is an image that say coming soon Bescherming. If you hover over it then the pop up will show up.

<html>
<title>CodeAve.com(JavaScript: Hover
Window within Previous Page)</title>
<body bgcolor="#FFFFFF">

// open new document
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#000000\">");
new_window.document.write('<img src="http://s27.postimg.org/krcprrm7n/Bescherming.png height="500" width="450">');
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close();
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window()
{
new_window.close();
}

// -->
</script>

</body>
</html>

So Then I repeated this and got rid of the links and you will see this on my site as Open Hover Window. The issue with this is that even nothing is placed in the new_window.document.write section but when you hover over it, the image from the original

// open new document
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write(" ");
new_window.document.write("");
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close();

Below is the full code

<html>
<title>CodeAve.com(JavaScript: Hover
Window within Previous Page)</title>
<body bgcolor="#FFFFFF">

// open new document
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write("This is a new html document created by JavaScript ");
new_window.document.write("statements contained in the previous document.");
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close();
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window()
{
new_window.close();
}

// -->
</script>

<a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Open Hover Window</a>

</body>
</html>

Can someone help me out?

Sup3rkirby

The first thing I want to say is please use [ CODE] or [ HTML] bbcodes when posting code. It really is a hassle to try and read and deal with unformatted code.

I feel like there will be a lot of additional information I'll be getting throughout the resolution of this issue, but to start there isn't anything in your code that would specify multiple (unique) pop-up windows. If you have 1 function that creates a popup window and you are not passing or using dynamic content for that window, it will always open the exact same window.

You will have to pass in information to your open_new_window() function for each link so that the function knows which image to load content for. For example:

<!doctype html>
<html>
<head>
	<title>CodeAve.com(JavaScript: Hover Window within Previous Page)</title>
</head>
<body bgcolor="#FFFFFF">

<script>
var $imgDescriptions = [
	"This is a description for image #1",
	"This is a description for image #2",
	"This is a description for image #3",
	"This is a description for image #4",
	"This is a description for image #5"
];

function open_new_window($a) {
	new_window = open("","hoverwindow","width=475,height=525,left=10,top=10");

// open new document
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#000000\">");
new_window.document.write($imgDescriptions[$a]);
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close();
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window() {
	new_window.close();
}
</script>

<a href="#" onMouseOver="open_new_window(0)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="#" onMouseOver="open_new_window(1)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="#" onMouseOver="open_new_window(2)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="#" onMouseOver="open_new_window(3)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="#" onMouseOver="open_new_window(4)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

</body>
</html>

This example gives you an array where you would store the specific content related to each image (whether it's a description, image, etc.). And then on your page you simply have each link load a specific one by adding the number (array index) as an argument for the open_new_window() function.

A few more things to note, the <title> tag needs to be inside of the <head> tag, which doesn't exist on your page (I only bring it up for the sake of standards and valid code).

And lastly, from a user experience standpoint (as well as a general functionality perspective), using popups for hover events to display any information is a terrible idea. Most modern browsers block popup windows by default, thus ruining the functionality of this script. Plus popup windows are not as user-friendly as some would like to believe. They are somewhat intrusive and shouldn't be used in such a prominent way on a page. A better idea would be to use an 'inline' method of displaying the data. For instance a simple <div> element that is hidden on the page. You can have this <div> appear when hovering an image and populate the <div> with your custom descriptions. Or you could even go along the lines of a modal type of window (like you would see with something like lightbox or jQuery UI's .dialog() method).

joshechevarria

Sup3rkirby thank you for your prompt reply. I apologize for not using the necessary bbcodes. I used to know html code fairly well but sort of fell out of it and I am now trying to familiarize myself with javascript so forgive me for my ignorance. I agree with your last point and will heed that advice. I am not at all familiar with lightbox or jQuery. I just downloaded a lightbox generator application so hopefully that will be of assistance for me. I was also curious if I could do an onClick function and then an onMouseOut function for the same image. Again I'm not too keen on all of this so I appreciate all you have to say. Thanks

Sup3rkirby

If you use lightbox as a solution, you won't need to set onclick or onmouseout events. Lightbox itself will handle all of that (for the most part). When you click an image it will open up a modal window (inside of the current window, but overlaying all other content) that will display a larger or full size version of your image as well as a description you can specify. This modal window is given an 'X' in the top corner to close it (or clicking somewhere on the page outside of that image generally closes it as well). Lightbox is a fairly popular 'tool' for image galleries so it might be the best place for you to start with this.

I don't know what a 'lightbox generator application' is, so I'll make sure I specify everything here.
Here is the latest version of lightbox: http://lokeshdhakar.com/projects/lightbox2/
As you scroll down on this page there are instructions for how to set up lightbox which basically has you include 2 javascript files (jQuery and the lightbox script), a css file (lightbox) and you will need to copy over some image files included with the download (used for the lightbox interface).

Once you have lightbox on a page you would basically end up with something like this for your images:

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #1"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #2"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #3"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #4"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #5"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>

joshechevarria

Okay great. Thanks for the link. I'll check it out - the lightbox generator wasn't very helpful. Thanks for the examples also. I look forward to trying it out.

joshechevarria

Okay so I tried it out and kind of got it. The lightbox is showing up but those images arent showing up like the x, loading image etc. Also its width is taking up the entire page and it cuts off my description at the first line.
http://joshuaechevarria.com/cinematography.html# same image

I uploaded all the lightbox js and css files as well as the img folder to my ftp server for the site and then used the following code

<br>
<head>
<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/lightbox.min.js"></script>

<link href="css/lightbox.css" rel="stylesheet" />

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="Bescherming ("protection" in Dutch) honors the coming-of-age story of two young girls in World War II Holland.
Uniting from separate faiths, Nurit and Sietske became unlikely friends when Sietske's family agreed to hide Nurit, a young Jewish girl from Amsterdam, in their home in north Holland. Still active in their nineties, *these two women - living across the world from one another - will virtually reunite via Skype to share their lifelong sisterhood of seventy years.

With supporting commentary from family and local historians, Nurit and Sietske reflect on the bond they formed while surviving in clandestine solidarity. In doing so, they remind future generations of the realities of the time and assert that faith, friendship and conversation are tools needed to ensure history does not repeat itself.

Summer 2014 Release

HD, 16:9

Filmed on Location in Israel, NYC and the Netherlands "><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png"height="170" width="290" border="0"></a>
</head>

Sup3rkirby

You can't use double quotes (") in the description, as those are what the entire description is wrapped in. So for instance Bescherming ("protection" in Dutch) breaks the title/description once it gets to that first quotation mark. And once that happens the HTML essentially goes crazy because everything that follows is read as a property/attribute (none of which would be valid).

I'm not entirely sure about line breaks. I would fix your quotation issue first and see what happens. If it doesn't solve the issue, try replacing each new line with an HTML <br> tag instead.

joshechevarria

Stupid me. Should have noticed that. Seems to be working well. My only issue now is how to adjust the width. Its taking up the entire screen. And then, ideally, Id like to place the image on the left and have the description on the right. Do have to go into the lightbox.css document in dreamweaver and adjust it?

Sup3rkirby

The width issue is a bit strange to me honestly. I can't see why it would be doing that and it shouldn't be happening by default in lightbox.

As for getting the text to appear on the right, that would require a modification of the lightbox CSS, yes. I'm not sure if you are familiar with using the developer console in any browser (right-click something on the page and select 'Inspect Element' or press F12 on the page), but you can use this to identify the classes you need to modify. At a base level it looks like .lb-outerContainer and .lb-dataContainer are the main classes (outer is the image, data is the description). There are several elements and classes nested inside of these, but those are the main 2 that you would need to adjust to get them side-by-side.

Oh and I almost forgot, the missing images. It actually looks like those are all correct. As I investigate it seems you load jQuery on your page twice (once using the new version lightbox includes and once at the top of your page, using an older version of jQuery, 1.7). I think you should remove the 1.7 jQuery include near the top of your document. It's probably causing the width issues as well as the additional images (close, next, loading, etc) not showing up.

joshechevarria

I guess the width isnt a huge deal since I plan on adjusting the placement of the image and description but its still odd and if I could find a way to control it I would.

I adjusted the color in the CSS file and saved it and reuploaded to my FTP server and the color hasnt changed. . Where am I going to remove the jQuery 1.7? I'm not sure I can get rid of it because its an iPage hosting website and I think its automatic in their website developing software. Maybe I can copy that jQuery 1.7 and use it in the coding that I have for the image?

Sup3rkirby

Hit Ctrl + F5 to refresh your page and clear any cached files (like the CSS). The color changes you made went through.

It also looks like you removed the jQuery (version 1.11) include lightbox came with. It does seem that it helped a little, but now lightbox is using the version from the top of your page (1.7) which is outdated and thus lightbox doesn't quite function as it was fully intended. You won't or don't need to copy it or anything, it's just that you only want jQuery to be included on the page once. And you would honestly want the most recent version.

I'm afraid I don't know how you could remove it if iPage is indeed automatically putting this on the page for you. Does iPage give you any sort of way to look at the actual source code of pages you build, or does it only give you the page editor? This could be a bit risky, but if you have FTP access you could copy that page to your computer, open it up in an editor and manually change the jQuery include (swap it out for the 1.11 version). Anything else that uses jQuery shouldn't be ruined by updating the jQuery version, but if anything was using outdated functions/methods they might break. And the other downside would be you'd probably have to make this change every time you save your page with iPage hosting.

joshechevarria

Awesome. Just noticed it.

I guess what I could do is access the FTP and remove the jquery that they already have in there and just keep the most updated jquery on there? Ill give it a try and see how that works. I hope it wouldnt ruin any of the previous scripts.

joshechevarria

So this is the code for the lightbox.css file.

body:after {
  content: url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/close.png) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/loading.gif) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/prev.png) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/next.png);
  display: none;

}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.9;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #141414;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #141414;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

I tried using this script which helped with the width and made it fit to the image and text but it would show up at the bottom of the page and you would have to scroll down to look at it. It was also faded.

div.fb-style-wrap
{
    position: absolute; 
    width: 100%;
    height: 150px;
    top: 25%;
    border: 0
}

.lightbox
{
    width: 350px;
    margin: 0 auto;
    border: 0
         color: #F8F8FF;
}

div

Do you have any idea what the issue is? Or should I try alternative lightbox codes like slimbox or fancybox?

Sup3rkirby

I'm not sure what all the changes you made were at this point. I see you're linking images in your CSS to an FTP location, which doesn't really work as far as I know. And the page itself request a username and password now (probably due to requesting files from FTP instead of an HTTP server). And actually I see some images that are being linked to a local file on a computer, which won't work at all.

Lightbox should do the trick just fine but you've just got some things to address before you get what you want. Have you tried editing the HTML from the page off the FTP server to replace the jQuery version? This for one would fix some of the initial issues with lightbox. Even if you tried something else, both slimbox and fancybox use even older versions of jQuery so it's possible they won't function correctly using 1.7.

I think for one you should probably go back to the default lightbox installation. There actually wasn't anything wrong with that CSS, it was the jQuery version that prevented it from getting a proper width. And once you removed the double jQuery issue the images were showing up so they were uploaded and linked correctly to begin with. The only changes you would need to make from the default lightbox install would be to find a way to update your jQuery version and then just adjust the CSS of those two classes I mentioned a few post ago (to get the image and text side-by-side)(the classes were .lb-outerContainer and .lb-dataContainer)

joshechevarria

I appreciate all your help. I did they reinstall. Also I copied the Html from the jquery-1.11.0.min file and rewrote the jquery-1.3.2 and replaced it in my ftp>js folder. Not sure what else to do.

Sup3rkirby

Okay, I'll try to walk through it this time.

Currently there are a few invalid things in your code, and conflicts that you'll have to resolve.

The first would be the invalid code.

<head>

<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/lightbox.min.js"></script>

<link href="css/lightbox.css" rel="stylesheet" />

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="<b>Bescherming (protection in Dutch) honors the coming-of-age story of two young girls in World War II Holland.</b>
<br>
<br>
Uniting from separate faiths, Nurit and Sietske became unlikely friends when Sietske's family agreed to hide Nurit, a young Jewish girl from Amsterdam, in their home in north Holland. Still active in their nineties,  these two women - living across the world from one another - will virtually reunite via Skype to share their lifelong sisterhood of seventy years.
<br>
<br>
With supporting commentary from family and local historians, Nurit and Sietske reflect on the bond they formed while surviving in clandestine solidarity. In doing so, they remind future generations of the realities of the time and assert that faith, friendship and conversation are tools needed to ensure history does not repeat itself.
<br>
<br>
Summer 2014 Release
<br>
<br>
HD, 16:9
<br>
<br>
Filmed on Location in Israel, NYC and the Netherlands "><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png"height="170" width="290" border="0"></a>
</head>

This is in the source code for your page. The problem is that <head> tag is inside of the <body> tag. And there is already a <head> tag at the top of the document. You cannot have 2 of these tags in a document and it cannot be inside of the <body> tag.

The second thing to note about that code is you include the jQuery file, but jQuery is already being included in your code (near the top of the source, inside of the first <head> tag). Including 2 copies of jQuery (and 2 different versions at that) causes conflict as well.

So to start you should replace that same block of code with this:

<script src="js/lightbox.min.js"></script>

<link href="css/lightbox.css" rel="stylesheet" />

<a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="<b>Bescherming (protection in Dutch) honors the coming-of-age story of two young girls in World War II Holland.</b>
<br>
<br>
Uniting from separate faiths, Nurit and Sietske became unlikely friends when Sietske's family agreed to hide Nurit, a young Jewish girl from Amsterdam, in their home in north Holland. Still active in their nineties,  these two women - living across the world from one another - will virtually reunite via Skype to share their lifelong sisterhood of seventy years.
<br>
<br>
With supporting commentary from family and local historians, Nurit and Sietske reflect on the bond they formed while surviving in clandestine solidarity. In doing so, they remind future generations of the realities of the time and assert that faith, friendship and conversation are tools needed to ensure history does not repeat itself.
<br>
<br>
Summer 2014 Release
<br>
<br>
HD, 16:9
<br>
<br>
Filmed on Location in Israel, NYC and the Netherlands "><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png"height="170" width="290" border="0"></a>

The only changes I made were to remove the opening and closing <head> tag (as it was duplicated and in the wrong place) and I removed the jQuery javascript include.

The next step is fixing your jQuery version. Near the top of your source code, inside of the <head> tag there is a javascript include for jQuery:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

This is including version 1.7.2 from google's servers (not your server/FTP). This means you can't replace that file or its contents. If your iPage hosting does not in any way allow you to modify that area of the page or give you an option to select your jQuery version, you will have to manually edit this.

For this specific page you would log into your FTP and download the 'cinematography.html' file. There you can edit the entire source code of the page. In the source code of this file you would replace the jQuery line I just displayed with this:

<script src="js/jquery-1.11.0.min.js"></script>

Then you would re-upload the 'cinematography.html' file and reload the page. It should have the correct version of jQuery loaded now so lightbox can function properly. There is a small chance something else using the old version of jQuery might be affected, however I did not see anything in the source that would likely mess up.

Once you reach this point you should be nearly done. The width issue should be fixed and the box should be displaying as an overlay. The last step would be to alter the CSS to move the text beside the image. But I'll save that for after this. Once you have made those changes I'll walk you through editing the CSS to get the desired appearance.

joshechevarria

I followed everything. The only thing I can not change because of ipage is the Script code for the updated jquery. I tried two options. I rewrote it in Dreamweaver and uploaded it. That didnt work because as soon as I refresh my Website Drag and Drop builder, it rewrites that part back to the early jquery. Ipage also has a Filemanger where you can actually just open the html doc and edit it. Unfortunately this does not work either. It just rewrites it back to the jquery 1.7.2.

Not sure what other options I have unless I use an older version of lightbox that is compatible with this version of jQuery. I wish Ipage would stay updated.

joshechevarria

GOT IT! I found an earlier version of Lightbox that works directly with the 1.7.2 version of jQuery. Thank you so much. If you didn't help me along the way I would have given the **** up. The next step is just being able to configure the photo and text placement. Also when I hover over the image, the entire description pops up along with the code. Is there anyway to prevent that?

Sup3rkirby

I'll start with the easiest answer. When you hover the image, the description pops up because it's inside of the 'title' attribute. This is not something you can prevent because it's controlled by the browser, which always renders the 'title' property as a tool-tip. However, with lightbox you should be using 'data-title' instead. I can't say I know for sure if it has changed between versions, but as long as it is supported in the older version of lightbox you switched to, then changing the 'title' attribute to 'data-title' instead will fix that issue.

As for getting the placement of the image and text the way you want it, this will be a little more tricky. You can edit the CSS a bit to get things pretty much set up, but there will need to be a change to lightbox's javascript as well. Lightbox is designed to position the window/overlay according to the image inside. It basically checks the width and height of the image and sets the overlay to fit, then centers this on the page. So the width of that overlay box is not set in CSS, but javascript. But I'll start with the CSS since that's easier.

The .fancybox-outer class needs to have 'display: inline-block;' added so it can be positioned beside the text. A relatively important thing to note is this won't fix the issue for IE7 (if that is a concern to you).
Next, the .fancybox-title-inside-wrap class needs to have 2 things added.

width: 420px;
display: inline-block;

The 420 pixels is relatively arbitrary. I felt it looked good enough to use based on the content you currently have in the title/description.

Actually, as I dig further into your code it looks like you are using fancybox now and not lightbox. However, I can't seem to find the .js file for fancybox in your source. I only seem to see the .css include. I'll need to see the source of your fancybox javascript file to help with the changes that need to be made there.

joshechevarria

I guess because its an older version the date-title code is not applicable. I tried it and it just made all my text disappear and only the image popped up. I cant seem to find the fancybox js anywhere in my ftp folder. It is hosted through ipage's drag and drop builder so I dont think I have much control over it.