LightBox - Script Conflict

**dakata** · 06-17-2011, 08:54 PM

1) Script Title: lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: The problem is that after I installed lightbox in my website I have installed another script called "jQuery Scroll to Top Control v1.1" - http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm .Thing is that the middle is a script conflict and do not know how to fix it, so if you can help me would be great.

The web page is : http://www.games.cs-uno.net/assassins_creed_rev.html

And this is the main code of the page :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Games.CsuNo.nET</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="ico">
<link href="style2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type='text/javascript' src='jwplayer.js'></script>
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
		var flashvars = {};
		flashvars.xml = "config.xml";
		flashvars.font = "font.swf";
		var attributes = {};
		attributes.wmode = "transparent";
		attributes.id = "slider";
		swfobject.embedSWF("cu3er.swf", "cu3er-container", "960", "400", "9", "expressInstall.swf", flashvars, attributes);

</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
</head>
<body>

***Text Area - To Big :D***

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Copyright © CsuNo.nET CoMMuNiTy";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>

</body>
</html>

So please help me , because this is quite urgent

**jscheuer1** · 06-18-2011, 12:37 AM

There are various ways you can go here. As long as you don't need prototype/scriptaculous for other stuff, here's what I would recommend -

Scrap Lightbox, get Slimbox 2.04 instead:

http://www.digitalia.be/software/slimbox2 - Intro/Demo page
http://code.google.com/p/slimbox/dow...imbox-2.04.zip - Link to the Slimbox 2.04 zip archive download page hosted on Google.

Looks and acts the same, is much lighter byte wise, and has more options. It uses the same syntax as Lightbox, so you don't have to change any of your links.

The best part is it uses jQuery so there will be no conflict.

The one tricky part, if you could call it that, is that you must not put two external script tags to jQuery on the page, and it's probably best to use jQuery 1.5.2 - so get rid of:

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Download Slimbox and put this in place of what you had:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen">

And where you have:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>

get rid of the highlighted line.

Put the required Slimbox files in the folders where they go, the css and helper image files in the css folder, the js file in the js folder, the other files and folders in the Slimbox archive are for demo and/or advanced purposes, you can ignore them for now.

Added Later:

I have some optional constructive comments and tips for that page. If you're interested, let me know.

**dakata** · 06-18-2011, 11:39 AM

Of course, mostly that I'm about to start regarding this side of scripting and I'm not too sure what will be my next move, because I'm afraid not to spoil something, so I can wait to hear it

.

And by the way, thanks for the help, I'll try it and let you know how and if it worked whit the slimbox

It Worked

, Thanks a lot !

**jscheuer1** · 06-18-2011, 02:32 PM

I guess that was sort of a weak "yes" on the comments and tips.

The reason I didn't include them in my first post is that I knew the changes in it would work and didn't want to complicate things.

Before you do any of these things, make a backup copy of your page.

After doing each one, test to make sure things are working, and make another backup copy before going to the next thing.

The first is I noticed that if you use the next and previous buttons on the lightbox, there are duplicates. Two extra Assassin's Creed Revelations Logo images (images/thumbs/assassins-creed-revelations1.jpg) and two extra Assassin's Creed Revelations: Multiplayer 2 images (images/assassins_creed/acr/acr_12.jpg)

They are not hard coded in the page. Something, I haven't figured out what, creates them. They seem to be useful in a way though - allowing the user to click on descriptions and see the larger image associated with those descriptions. So I see no need to get rid of them. But it would be nice to get them out of the train of next/previous once the user is looking at the Lightbox images.

To do so, open up slimbox2.js with a text only editor like Notepad. Make sure word wrap is off. You will see some info, a long line that is the main script, and this:

Code:

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

Get rid of that part and replace it with this:

Code:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);

Save it. Use it instead of the one you're currently using.

This will require you to change all (14 when I looked at the page) of your:

Code:

rel="lightbox[acr]" title

like in:

Code:

<a href="images/ACS.png" rel="lightbox[acr]" title="Assassin's Creed Series">

to:

Code:

rel="lightbox[acr]" rev

like:

Code:

<a href="images/ACS.png" rel="lightbox[acr]" rev="Assassin's Creed Series">

Back up the file first. In your text only editor you can just do a global search and replace on:

Code:

rel="lightbox[acr]" title

to:

Code:

rel="lightbox[acr]" rev

That's the end of the first thing. Test it and see if it works before continuing.

The second is there are two versions of swfobject:

games.cs-uno.net/js/swfobject/swfobject.js

and:

games.cs-uno.net/swfobject.js

that are brought in externally to the page by:

Code:

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

It looks like you're only using the first one, so try getting rid of the second one, make sure everything still works with your video. You can always put the second one back if there's a problem.

The third thing is byte load and dimension size on the images. The page takes a long time to load even on a fast connection because so many of the images (both background and foreground) are so huge. Try resizing down the larger foreground ones, and optimizing all of them.

That's it. Or at least those are the main things I noticed.

**dakata** · 06-18-2011, 05:20 PM

Not a weak "yes" , but a strong one , because I want to know and learn as much as possible.

So I did what you recommended and the first step worked (although I've put those images whit the descripion, just because some of the users wish to see them closely) , but there are some issues regarding the 2nd and 3rd step, like:

At the 2nd step I tried to get rid of the

Code:

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

but the video no longer started, although I selected the path to the first swfobject.js

Code:

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

and it didn't worked.

At 3rd step, the background is really great in size, I know, but I do not really have a choice in terms of its change, because I want the page to look just like now, but I do not know what to do to get rid of large size and remain exactly the same.

So if you can advise or help me with this or other problems I would be grateful.

Thank You again for your help and hope to get it again

**jscheuer1** · 06-19-2011, 02:54 AM

I'm glad the first step worked out.

About the second one I had said (emphasis added):

It looks like you're only using the first one

Perhaps you need both. From what you are saying you need the second. Perhaps you can get away with only the second one. It doesn't hurt to try it out. You can always revert to both if both are needed.

On to the third thing. Images on web sites are a little tricky. Obviously if you want a certain complex background, you cannot change its dimensions. But you could speed the loading of the page by reducing its byte size. I mean like, 9MB, sheesh! Even at 100mbps it took so long that an ordinary person would begin to think something was wrong, maybe even give up and go to another site.

Simply by converting it to a .jpg and applying 70% quality and selective compression I was able to reduce it from 9,403,608 bytes to 255,344 bytes (2.4% of the original byte size) and still maintain acceptable resolution:

http://home.comcast.net/~jscheuer1/side/acr-main-bg.jpg

If you were to take just the top two parts, save it as a .jpg and make it the background for just the top of the page and then take just one panel of the rest of it and make that repeat vertically as the background for the rest of the page, even more byte/download time savings.

As for some of the other images, like:

games.cs-uno.net/images/ACS.png

and the others in the gallery,They could be reduced by converting to .jpg and could also be reduced in dimensions. They don't even fit on my generous 1600 x 900 screen. If you made them 950 x whatever was proportional, they would still be plenty big. But they would require far fewer bytes and time to download and would fit on the average user's screen (1024 x 768).

**dakata** · 06-19-2011, 10:31 AM

Those scripts swfobject.js used 2 "plugins" CU3ER and JW Player, I tried to get rid of them, one by one, but when I tyed to get rid of this :

Code:

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

the JW Player stoped working, and when I tyed to get rid of the other one :

Code:

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

the same thing happened with the CU3ER plugin , and I decided to leave them as they are right now.

OK, so now I have 2 new questions, if I can help me :

First, about the backgrounds: What do I need to do for me to have the background like this :

http://i56.tinypic.com/5k37k8.png -> to appear just once on the top of the page

and

http://i53.tinypic.com/2a6w6ra.png -> to repet its self but after the first image (http://i56.tinypic.com/5k37k8.png)

because if I do what you did ,meaning to convert the http://www.games.cs-uno.net/images/acr-main-bg.png to a .jpg file the quality will drop very low and I realy don't want this to happen.
If you have any suggestions I will be happy to hear , ohh and the style.css page for the http://www.games.cs-uno.net/assassins_creed_rev.html is this :

http://www.games.cs-uno.net/style2.css (if you'll need it)

Second, I tryed to make a litle bit of jQuery scripting on this page http://www.games.cs-uno.net/about.html , meaning that at the very bottom of it , it says : "Click here to view Partners & Statistics" , so when you click, it will drop (show) and until now every thing goes perfect , but I also want , when I click that "Click here to view Partners & Statistics" again to callback (hide) those images.

Here you have the code from the <head>...</head> area :

Code:

<script type="text/javascript" >
  $(document).ready(function()
    {
      $('a#nr1').hide();
      $('a#texts').click(function()
         {
           $('a#nr1').show('slow');
         });

      $('a#nr2').hide();
      $('a#texts').click(function()
         {
           $('a#nr2').show('slow');
         });

      $('a#nr3').hide();
      $('a#texts').click(function()
         {
           $('a#nr3').show('slow');
         });
    });

</script>

And here is the code from the <body>...</body> area :

Code:

<a id="texts">Click Here To View Partners & Statistics ∇</a>
<br>
<br>
<a href="http://www.gosquared.com/livestats?ref=2895" id="nr1" target="_blank"><img src="http://cluster-0.gosquared.com/widget/GSN-158359-H" border="0" alt="GoSquared LiveStats Widget" title="Who's on your site right now? Get GoSquared real-time web analytics now." /></a>&nbsp;<a href="http://www.cs-uno.net" id="nr2"><img src="http://dakata.ucoz.com/Images/csunominibanner2.png" border="0" alt=""></a>&nbsp;<a href="http://www.tutorialecstrike.com" id="nr3" target="_blank"><img src="http://tutorialecstrike.com/banner/bt.gif" width="88" height="31" border="0" title="Tutoriale si Resurse Counter Strike 1.6 si Source"></a>

So if you can help me, I can't wait for a response, or why not a new advice

THanks again !

**jscheuer1** · 06-19-2011, 03:18 PM

For your script you might use .toggle():

http://api.jquery.com/toggle/

Code:

<script type="text/javascript" >
  $(document).ready(function()
    {
      var pstats = $('a#nr1, a#nr2, a#nr3').hide();
      $('a#texts').click(function()
         {
           pstats.toggle('slow');
         });
    });
</script>

About the images again. I may have 'stepped on' the image too much when compressing it. You could try 80% or 85%. Consider though that crystal clear precise background images are not required. Even if you saved it at 99% quality, virtually lossless, as a .jpg it would require far fewer bytes than as a .png.

The way to setup the two backgrounds - one for the top and one for the rest of the page is to skip the background image for the body. Give it a color, like black. Then have two divisions to hold the content of the page. The first one would be the height of the first background image and contain the stuff that goes in front of that. The second one would have the other background image and contain the stuff that goes in front of that.

Alternatively, since your second image is basically just black or could be a solid color. You could use the first image only as the background for the body and have the background color for the body be black:

Code:

body {
background: black url(http://i56.tinypic.com/5k37k8.png) 0 0 no-repeat;
}

for more on background see:

http://www.blooberry.com/indexdot/cs...colorbg/bg.htm

or your favorite CSS resource.

There's also a CSS 3 specification:

http://www.css3.info/preview/multiple-backgrounds/

for multiple backgrounds that would be great for this. But it's probably not widely supported enough yet.

**dakata** · 06-19-2011, 06:01 PM

The good news is that I managed to locate the backgrounds as I wanted without having to resize or convert them, which means that from 10 Mbps as had before, now they all have up to 2.5 Mbps by using this :

Code:

body {
margin:0;
padding:0;
width:100%;
background-image: url(images/acr-main-bg.png), url(images/bg.png);
background-position: center top, center bottom;
background-repeat: no-repeat, repeat;
}

I also managed to make that jQuery script work.

But also now I have a new problem , which is :

How do I make my Search Box working , I mean what code or script do I need to put in for it to work ? because , now when I type a word inside and click on the button to start the search it takes me to the same link

, and this is the thing which I never knew and still don't ...

Now the code that I have is this and I don't know what to replace it with :

Code:

      <div class="search">
        <form id="form1" name="form1" method="post" action="">
          <label><span>
            <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
            </span>
            <input name="b" type="image" src="images/search.gif" class="button" />
          </label>
        </form>
      </div>

So I realy hope you can help me with this , because your advices and suggestions were great

Thanks a lot for helpling !

**jscheuer1** · 06-20-2011, 01:47 PM

About the script for "Click Here To View Partners & Statistics ∇", it might be nice to add:

Code:

  $(document).ready(function()
    {
      var pstats = $('a#nr1, a#nr2, a#nr3').hide();
      $('a#texts').click(function()
         {
           pstats.toggle('slow');
         }).css({cursor: 'pointer'});
    });

That will give the text the link cursor so that it looks more clickable than it does now. And it would be slightly better to use:

Code:

  jQuery(document).ready(function($)
    {
      var pstats = $('a#nr1, a#nr2, a#nr3').hide();
      $('a#texts').click(function()
         {
           pstats.toggle('slow');
         }).css({cursor: 'pointer'});
    });

You don't need that now. It will allow the code to function in a jQuery.noConflict() mode environment which may or may not be needed in the future for the page. Sometimes it creeps in with the addition of other jQuery code. Other times it's required if you wish to add another script library.

About the images, images don't have mbps. That's a transfer speed - Mega Bits Per Second. I see that you have reduced their byte size though, that's good.

Again, I never said to reduce the dimensions of the background image(s) unless doing so would not affect the appearance.

As it is now, if I completely clear my cache - the situation of any first time visitor to the site, it takes a little over 45 seconds to load the page in Firefox 4. Same thing in IE 9. Eight seconds is the industry standard, the point at which the average user gives up and goes somewhere else. My connection speed is 100mbps - considered very fast, though I'm sure that there are some faster ones, many will be slower. And network conditions will almost always shave some mbps off your rated connection. The page will take even longer to load on a slower connection.

I would convert acr-main-bg.png, bg.png, and ACS.png to jpg and use as low of a resolution as possible that still gives you the look you want. Even at 99% (virtually lossless) quality there will be time savings though. I would resize ACS.png and acr_1.jpg thru acr_12.jpg to 950 width, making the heights proportional. With these as well the lowest acceptable resolution should be employed.

For even more time savings as the page loads, you could use smaller versions of ACS.png (hopefully now ACS.jpg) and acr_1.jpg thru acr_12.jpg for the image links that launch the Lightbox. As it is now, all of those huge images must load with the page because you are using them as the image links. You could make resized versions of them that fit the current layout, or even smaller ones, so that more could be seen at once. Have the href for the links still point to the larger versions (which now could be the 950 width versions). Slimbox will show a loading icon until the larger image is downloaded, but that will be brief compared to loading them all with the page. And Slimbox will preload the next and previous large images while the user is viewing the current large image.

About the search box, there are third party utilities for that, or you could probably set it up to use Google and/or other search engines.

What's the purpose of the search? Is it to search within the site for keywords? If so I had a form for that for Google that may still work, if so the results could be displayed in a separate window or in an iframe on the current page. Or one could just be taken to the search results page.