Having trouble with Lightbox - javascript

OK i downloaded all the files and put them into a directory on m server call "lightbox" when I try to use it on a page, the image pops up on the bottom of the page, not overlapping modal like. I changed the images sources in the lightbox.js file to include the lightbox/ directory. The images in the css file are still relative to the css document . So I am not sure why it is not working correctly. Here is a link to the page Clicky
Does anyone have a clue what I am doing wrong?
Thanks!!
UPDATE the text page located here:clicky which is inside the lightbox directory works fine. So I am pretty sure this is happening because I put the files into a folder on my server instead of just on my server, but I would like to keep my files organized so if anyone knows how to make it work from inside a directory?

There is some image paths in the js file. You can modify them there... or better yet add this before the lightbox.js script
<script type="text/javascript">
LightboxOptions = {
fileLoadingImage: '/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/lightbox/images/closelabel.gif'
};
</script>
<script src="js/lightbox.js" type="text/javascript"></script>

This is pretty silly but I put in the correct address for the javascript files but I had put in an incorrect address for the CSS file, after correcting that it worked.

Related

HTML link to JS folder file not working

I have js file and if I put <script src="link_to_file"></script> on bottom of my html page, it doesn't work.
Instead, if I put <script>function( etc..</script> on bottom of my html page, it works.
What is problem?
Try this:
HTML
bottom
<script src="external-script.js><script>
EXTERNAL JS
Add $(document).ready(function () {})
Make sure jQuery is loaded first.
Check your global variables.
Make sure that you're using the right path, that's depending om your folder structure. For example, if the js file is in the same folder as your html file, use
<script src = 'fileName.js'></script>
Do not forget to include the .js extension at the end of the file name. The file name should be same as the name of your js file.
Anyhow, you do not have to put the script in the head section as someone has suggested. It's in fact, not a good practice.

jquery how to add image from computer

i am working on a website and creating my own gallery.
However there seems to be a little problem with the code.
i wanna add my picture from my computer so it has the right width and heihgt.
here is the code.I tried to do cover in css but some images are too big and wont fit.Thank you for reading.
<script type="text/javascript">
$('#button1').click(function()
{
$('#gallery').css("background-image", 'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy');
//luffy serieuse kop
}); </script>
and this is my second button wich works perfectly fine but also wanna change because width and height problems
<script type="text/javascript">
$('#button2').click(function()
{
$('#gallery').css("background-image", "url(http://vignette3.wikia.nocookie.net/mvl/images/e/e9/Luffy-One-Piece.png/revision/latest?cb=20140221162732");
//luffy lachende kop
}); </script>
so what i wanna know is how to add my own picture.
The image path you use shouldn't be the actual path of the image on your computer, it should be the path that the specific html file you're in would use to get to the image.
Your link here is the problem:
'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy'
For example, if I had a directory that contained:
index.html
img.jpg
index.html could display img.jpg using src='img.jpg'.
However, imagine I have a directory where index.html is on the same level as a directory called "images" which contains your image file, like this:
index.html
images
img.jpg
Then, in order to display the image I would use src='images/img.jpg'.
Most of the time, people have a folder with all of their website images in the same folder as their index.html file so they can pull directly from the folder.
Hope this helps!
Bonus learning note:
.. means "go up a directory". This is useful if you can't directly access the images folder from your html file. For example, if your directories looked like this:
html
index.html
images
img.jpg
You would first have to go up a directory before entering the images folder and displaying img.jpg. Then, your file path would be src='../images/img.jpg'.

slide show not works in downloaded site

I've built a site http://ucemeche.weebly.com , Now I want to transfer it on other server. http://Weebly.com provides a function to download whole site in zip format that I've done.
But problem is when I am browsing that downloaded site the slide shows, photo gallery etc are not working in as working in live site. Perhaps it is related to java script.
Why is it happening ? What is the solution ?
Check the paths of the javascripts. You might be missing some scripts or you do not include them properly.
Check the error console in your browser. Most likely it will show you what's wrong.
You simply have to change the paths to the images in the html file
the paths will be something like:
"2\/1\/2\/5\/56254238\/3375189.png"
change them to:
"..\/folder name where your files are\/uploads\/2\/1\/2\/5\/56254238\/3375189.png"
This was three years ago, so perhaps this is a late answer. There is a hosted file slideshow-jq.js. In it, there is a function largeURL(photo).
Copy that slideshow-jq.js into the root of your zip, and edit the file:
url = '/uploads/' + url.replace(/^\/uploads\//, '');
Remove the leading / in front of uploads.
Now, update your page and look for this line:
<script src="http://cdn2.editmysite.com/js/site/main.js?buildTime=1234"></script><script type='text/javascript' src='http://cdn1.editmysite.com/editor/libraries/slideshow-jq.js?buildTime=1234'></script>
Or something like that. Change the src to the local file, "./slideshow-jq.js"
That corrects the issue.

js file path is correct but it cant be loaded

I'm using ASP.Net Dynamic Data. I have the following line in my site.master page.
<script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
The path is correct and file exists. But when I load the page I can see in the Net panel of firebug that it cant find the file. Error message is "404 Not Found"
Approach - 1
You should modify the code like as mentioned in below ways...
~/Scripts/jquery-ui-1.8.20.custom.min.js
"<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"
in the first case replace the .. with ~
Approach - 2
Alternatively, Right click the Page and select View Source. click the link of your Script file and check if it navigating to your actual Script file? Otherwise make the necessary changes as mentioned above.
I dont trust your url :)
use :
<script src='ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")' type="text/javascript"></script>
also , please verify - you load the jQuery.js BEFORE you load this line.
When you use ../ at the beginning of a url, it is the browser's current url that is taken as the base. So that url will only work when you are at exactly one directory level down from the site root, like this:
http://myserver:myport/myvirtualdir/somedir/somepage.aspx
Or this:
http://myserver:myport/myvirtualdir/somedir/ (using a default page or view)
Then, the browser will load the following script:
http://myserver:myport/myvirtualdir/Scripts/jquery-ui-1.8.20.custom.min.js
But if you are at any other directory depth, the browser will use the wrong url for the script. Like if you are at the root default page:
http://myserver:myport/myvirtualdir/Default.aspx
Then the browser will try to load the script from the wrong directory:
http://myserver:myport/Scripts/jquery-ui-1.8.20.custom.min.js
That is why you need to resolve the url on the serverside, like a couple of people have already said here. That will provide the browser with a working url for your script. There's a difference between file paths and urls.
The fact that you are getting a 404 means that the url that the browser is trying to reach is simply not correct, from the browser's point of view, which is in fact the only point of view that is valid, even if you, the developer, is convinced that you are doing it right...
<script src="<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"></script>
As Royi mentioned make sure you have the jquery.js before you have your jquery-ui.js
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
Here is a tip. open site.Master designer then drag and drop the .js file from the Solution Explorer into the designer. It would create the path for you.

Can i use javascript to prevent Loading the same script over and over?

Writing an application for a custom gallery, and all the script files are put in a resource folder inside each gallery folder-
is it possible to have a variable enabled that would prevent the page from loading its local JavaScript files but instead load from the main page's resource folder? trying to avoid having to hard-code it as well.
esentially all i really want is for my script files to be able to have a variable starting path- IE
(script src="(path)load.js" type="text/javascript")(/script)
where path is either blank "" or main main site- "http://www.site.com/resources/"
some of the files are CSS files so im not sure the class method would work well-
also- is there a way to refer to the root of a site? similar to using ../ but just to get the root html path.
More Info-----
The layout i have is that each gallery made is a separate folder- (for example, photography, painting, drawings, etc- would all be separate folders). They each would contain their own resources withing their folder. this is so i can just upload 1 gallery to a site and everything would be packaged nicely. But- if im running multiple gallery on one site- as with a portfolio site, each page is loading its own set of resources, which is probably not a great idea.
The resources are - thumbnails, images, xml( which are all specific to individual gallery) but then they also each have a couple javascript files for functions, a css file, and a few images that make the gallery maneuverable(arrows and the like).
I just want to be able to have the scripts which are loaded in the header- load from the root site resource folder if there are multiple gallerys
you can put all the code under a single class name e.g. Mydata.yourvariable
and then check ..
if (Mydata) { //your script has already been loaded }
it's similar to what jQuery does with $
Check out Javascript file dependencies - Selective load resource files & prevent duplicates Also check out this http://toscawidgets.org/documentation/ToscaWidgets/require_once.html
Perhaps you could try something like this:
in index.html (or another html file) you do:
<html>
<head>
<!-- use this if you need custom location, omit for the default one -->
<script type="text/javascript">
var GALLERY_PATH = "/gallery/";
</script>
<!-- ------------------- -->
<script type="text" src="/gallery/gallery.js"></script>
</head>
<body>
...
</body>
</html>
gallery.js:
var GALLERY_PATH = GALLERY_PATH || "http://mysite.com/default-gallery-location/";
document.write('<script type="text/javascript" src="' + GALLERY_PATH + '/js/_gallery.js"></script>')
document.write('<link rel="stylesheet" type="text/css" href="' + GALLERY_PATH + '/css/gallery.css">');
...
This way you easily include all files you need with the 1-liner and all files are loaded once. Hope it helps, of course if I understood the problem correctly ;)
If you found too much hard to handle it with javascript, you can do from server. That depends if the problem is the double call, or the Kb download resource used.
On the last case you can simply enable some cache driver to your web server, like Varnish or MemCache. Once you put a cache you have not to worry about double file loading anymore.
If you want to avoid lot of loads from the same javascript script, you can add a local counter then put 1 when it has loaded once. You will edit the initial call function to test if it's currently loaded, then avoid.
If you have lot of js files, and just wanna avoid calling the same resource twice of more, use session cookie to store the counter.

Categories

Resources