PDA

View Full Version : LightBox - Script Conflict



dakata
06-17-2011, 08:54 PM
1) Script Title: lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/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 :



<!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/downloads/detail?name=slimbox-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:


<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:


<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:


<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 :D

It Worked :D , 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:


// 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:


// 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:


rel="lightbox[acr]" title

like in:


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

to:


rel="lightbox[acr]" rev

like:


<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:


rel="lightbox[acr]" title

to:


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:


<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
<script type="text/javascript" src="swfobject.js"></script>
but the video no longer started, although I selected the path to the first swfobject.js

<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 :


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

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


<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 :



<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 :



<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/


<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:


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

for more on background see:

http://www.blooberry.com/indexdot/css/properties/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 :


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 :


<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 :D

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:


$(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:


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.

dakata
06-20-2011, 03:27 PM
Ok , so I'll try to convert those .png images to .jpg and resize them to 950x , and when I ment to write the image size (byte size) I accidentally wrote Mbps instead of Mb, my mistake :D .
I also changed the jQuery code an now is even better.

Now about that search box , I want it find (show) the results for keywords from my website , not Google or other search engines. For example , when I type "assassin's" I want it to take me to a page where is showing me all the topics ,pages, images, etc. from my website, but , again , on a page with the same template (background, style) as the index.html ( http://www.games.cs-uno.net/index.html / http://www.games.cs-uno.net/style.css ) .

So thanks again for helping , I promise I'll convert those images soon, because I'm a little busy those next two days, but I really want to hear about that sesrch box and other scripts :D

jscheuer1
06-20-2011, 04:49 PM
I know from working with images myself in my own projects that I always want the largest highest quality images. The same is often true with folks such as yourself with a project they're working on. I always tell myself and others the same things I've been telling you about load time though. In my case I do cut down on the size of things, both byte size (for all images) and wherever possible on the dimension size.

You do want your users to hang around long enough to actually see and use the page. But I know the temptation is to make everything as huge as is possible, especially if it looks good on your equipment, which I'm sure it does. Sounds like you have a pretty awesome computer there.

And there's something to be said about the fact that your target audience appears to be gamers - folks who probably also have large hi-res screens with fast connections and fast video cards. But even with all of that, the length of time to load those graphics the first time is going to be beyond what many people will wait around for.

Test it yourself. In Firefox, while viewing the live page, hit Ctrl-F5 (reload after a clearing the cache), use a stop watch or count off the seconds in some accurate way. In IE you have to clear the cache manually. Close the page. Then via the Tools > Internet Options > Delete (button) > make sure 'Temporary Internet Files" is checked, and hit the Delete button again. Using the IE developer tools doesn't clear it all away for some reason. Then navigate to the page, it will be as if you were going there for the first time.

As for the search, I'm not aware of anything specifically for that, but I think there must be third party utilities. If you have PHP you might be able to adapt what I was talking about to bring Google's result into a page with your styles. There may be copyright issues there though unless you make it clear that it's Google's content, perhaps even if you do.

If I were you, I'd do a search on Google for

custom site specific search

see what options come back.

One other thing on the images. That CSS 3 trick that works so well in most browsers doesn't work in IE 8 and less. You can include an IE specific stylesheet to work around that so that at least they get - say the acr-main-bg.png at the top with the rest just a black background:


<!--[if lt IE 9]>
<style type="text/css">
body {
background-image: url(images/acr-main-bg.png);
background-position: center top;
background-repeat: no-repeat;
background-color: #000;
}
</style>
<![endif]-->

Put that in the head of the page after the link to your stylesheet. Or put its rule in a separate stylesheet - say ie8.css:


body {
background-image: url(images/acr-main-bg.png);
background-position: center top;
background-repeat: no-repeat;
background-color: #000;
}

And link to it after your stylesheet:


<!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" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="ie8.css" type="text/css">
<![endif]-->
<link rel="stylesheet" href="slimbox/css/slimbox2.css" type="text/css" media="screen">
<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> . . .

dakata
06-20-2011, 05:44 PM
Well I tryed to do that like 2-3 weeks ago , but the black background wasn't good looking, because of the "style" ,of the template, and the color of the content , images, and others.

I did so , meaning puting .png images , because , yes, 80 % of the people who visit that website are professional or regular gamers ,with strong PCs and fast connection, just like me , but gamers who want to see images and videos at a high quality and high resolution, preferably HD, becasue now , here in my country (Romania) nearly 70 % of the population has fast connection, meaning 100 Mbps or more.

And as I sad I'll definitly convert those images to see a result.

Now ... as I was checking my webpage I run in a little problem with the JW Player , meaning that when I want to create a video playlist (with all the .js , .css and links are uploaded and working), with videos from YouTube it wouldn't apear on the page.

Now that was my first ideea , but as I was thinking , I realised that is better to make a gallery of videos , becasue there are like 26 videos in the same playlist (all form YouTube), and I and was wondering if you know such scripts, one that has a similar animation with slimbox2, lightbox or a normal I really don't care as long as it's something beautiful and that fits with the pages and the template.

So if you know such scripts for JW Player and animations like jQuery , let me know :D

And thanks again for the tips, becasue they were very helpful ! :)

jscheuer1
06-21-2011, 07:39 AM
Well I tryed to do that like 2-3 weeks ago , but the black background wasn't good looking, because of the "style" ,of the template, and the color of the content , images, and others.

I don't think you understand. In IE 8 and less there's no background, period. My suggestion was simply so that those browsers would have something instead of white.

While I'm thinking about it tho, it would be good to give all browsers a background color. That way, while the background images are downloading it isn't all white.

dakata
06-21-2011, 03:12 PM
Ok, as I sayd I'll convert those images and do that background :) .So about the JWPlayer (playlist) and the animations do you have any ideas ?



Now ... as I was checking my webpage I run in a little problem with the JW Player , meaning that when I want to create a video playlist (with all the .js , .css and links are uploaded and working), with videos from YouTube it wouldn't apear on the page.

Now that was my first ideea , but as I was thinking , I realised that is better to make a gallery of videos , becasue there are like 26 videos in the same playlist (all form YouTube), and I and was wondering if you know such scripts, one that has a similar animation with slimbox2, lightbox or a normal I really don't care as long as it's something beautiful and that fits with the pages and the template.

So if you know such scripts for JW Player and animations like jQuery , let me know


Thanks again ! :)

jscheuer1
06-22-2011, 09:03 AM
Perhaps one of these:


colorbox (http://colorpowered.com/colorbox/)
jQueryUI Dialog (http://jqueryui.com/demos/dialog/)
fancybox (http://fancybox.net/)
DOM window (http://swip.codylindley.com/DOMWindowDemo.html)
shadowbox.js (http://www.shadowbox-js.com/index.html)


Some of these could be used instead of SlimBox for the images as well.

dakata
07-17-2011, 01:46 PM
Hello jscheuer1, sorry to bother you and with my questions, but now I have a very hard problem. I managed to do the website's search box and I also managed to create a system of registration and login.

Now the problem is that I've found a script like jQuery Popup Login which I managed to make it work, that is to login and registerte, but as you can see in the image below (IMAGE-1) where I circled in red, after I logged in , it appearsthis -> "Hello Guest, Sing Sing Up in it", now, what I want to do is that when I or another user logs on, instead of "Hello Guest, Sing in or Sing Up" I want to appear "Hello USER'S NAME, Logout" but this time not to have that proprietary popup and remain fixed as in (IMAGE-2) , without that popup (IMAGE-3) to appear again.

IMAGE-1

http://dakata.ucoz.com/image-1.png

IMAGE-2

http://dakata.ucoz.com/image-2.png

IMAGE-3

http://dakata.ucoz.com/image-3.png


JQuery code that I took and I found is this:



<div id="Top" style="position: fixed; left: 0px; right: -30px; top: -1px;" >
<script src="js/pngfix/supersleight-min.js" type="text/javascript"></script>
<link media="screen" type="text/css" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" rel="stylesheet">
<!-- jQuery - the core -->
<script type="text/javascript" src="http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js"></script>
<!-- Sliding effect -->
<script type="text/javascript" src="http://web-kreation.com/demos/Sliding_login_panel_jquery/js/slide.js"></script>

<div id="toppanel">
<div id="panel">
<div class="content clearfix">

<div class="left">
<h1>Welcome To YOUR SITE</h1><p class="grey">
<img align="left" src="URL OF YOUR PICTURE" style="padding-right: 5px;">
TALK ABOUT YOUR SITE
</p>
<p>&nbsp;</p>
<h2>Sign in using Facebook</h2>
<p class="grey">
Do you have a Facebook account? If so, you can sign in using your account! Just click the button below.
</p>
<div id="welcome-module-fbconnect">
<fb:login-button onlogin="facebook_onlogin();" size="large" v="2" class=" fb_login_not_authorized FB_login_button FB_ElementReady">
<a class="fbconnect_login_button FBConnectButton FBConnectButton_Large" id="RES_ID_fb_login"><span class="FBConnectButton_Text" id="RES_ID_fb_login_text">Login with Facebook</span>
</a>
</fb:login-button>
</div>
</div>

<div class="left">
<form method="post" name="loginForm" action="http://www.YOURSITE.webs.com/apps/auth/doLogin" class="clearfix">
<input type="hidden" value="apps/profile/" name="next">

<h1 class="padlock">Member Login</h1>

<label for="log" class="grey">Email:</label>

<input style="width: 180px; height: 20px; border: 2px solid darkgray;" id="email" title="Email" maxlength="100" name="email" gtbfieldid="4">

<label for="pwd" class="grey">Password:</label>

<input type="password" style="width: 180px; height: 20px; border: 2px solid darkgray;" id="pass" title="Password" name="password">

<label><input type="checkbox" value="forever" checked="checked" id="rememberme" name="rememberme"> &nbsp;Remember me</label>

<div class="clear"></div>

<input type="submit" class="bt_login" value="Login" name="submit">

<a href="http://www.YOURSITE.webs.com/apps/auth/forgotPassword" class="lost-pwd">Lost your password?</a>

</form>

</div>

<div class="left right">

<form action="http://www.YOURSITE.webs.com/apps/auth/signup">

<h1>Not A Member? Sign Up!</h1>
<p style="size: 12px;">
<img src="http://clickbankaffiliateprogram-plr.com/Images/CheckMark.png">
WHAT PEOPLE CAN DO
<br>
<img src="http://clickbankaffiliateprogram-plr.com/Images/CheckMark.png">
WHAT PEOPLE CAN DO
<br>
<img src="http://clickbankaffiliateprogram-plr.com/Images/CheckMark.png">
WHAT PEOPLE CAN DO
<br>
<img src="http://clickbankaffiliateprogram-plr.com/Images/CheckMark.png">
WHAT PEOPLE CAN DO
</p>
<input type="submit" name="submit" value="Sign Up" class="bt_register">
<p>&nbsp;</p>
</form>
</div>
</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>
<li>Hello guest, please</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">
Sign In
<font color="#ffffff">
or
</font>
Sign Up
</a>
<a id="close" class="close" href="#" style="display: none;" color="red">
Cancel
</a>
</li>
<li class="right">&nbsp;</li>
</ul>
</div> <!-- / top -->
</div>
</div>



And this code is currently installed only on the index page:

http://www.games.cs-uno.net/index.html

If you need other resources form the website, please do not hesitate to ask :)


Oh, and I forgott to mention that the slide.js code from the script is this :



$(document).ready(function() {

// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});



And I really think that those Switch buttons from "Log In | Register" to "Close Panel" dosen't work very good, you can check my site and see what I mean .. :|

So if I can help me , it would be great ! :D
Thanks again, dakata