Develop Reference

How can I get the jQuery I worked on in jsfiddle to my website?

I'm working on a website mostly just for fun and am using HTML and CSS. I have some limited knowledge of these languages, but have never used jQuery before. But for only one page of the website, I wanted to have "linked sliders," which I found could be created using jQuery. I found a jsdiddle with some sliders and modified them to fit my project.
Here's the jsdiddle with the end product that I'd like to be embedded on one page of my site: http://jsfiddle.net/7e8xwjer/8/
I looked up how to add jQuery to a page, and took the following steps:
1) Downloaded jquery-1.12.3.js and renamed it jquery.js.
2) Added the following line of code in the head of the page:
<script type="text/javascript" src="jquery.js"></script>
3) Created a new .js file called js1.js with all the jQuery code from the jsdiddle.
4) Added the following line of code in the head of the page (in addition to the first):
<script type="text/javascript" src="js1.js"></script>
5) Added the CSS styling and HTML table from the diddle as needed.
The CSS and HTML table work fine, but none of the jQuery works. I'm sure I've made a simple error here, but I can't figure it out! Please let me know what other steps I need to take to get the jQuery script functioning on the site.
Thanks in advance for the patience and help.

JSFiddle, usually, (depends on the settings you choose [see image, point 1]) encloses all JS code into a document ready event so your js1.js should look something like:
$(document).ready( function(){
// your code from JSFiddle here
});
EDIT:
looking at your Fiddle, you are using JqueryUI [see image, point 2] so have to include it as others said in comments.
EDIT 2
your fiddle is set "onLoad" [see image, point 3] so to reproduce exactly the same condition you would have to replace $(document).ready with $(window).load; however I'm not sure that in your case you need to wait until all resources are loaded... So don't change it unless needed.

jQuery is a library of functions. You need to import them. When you download the library, you need to point the src= correctly. The directory where jquery is in relation to the overall file structure.
myharddrive
\ myfolders
\ mysubfolders
\ jquery
index.html
mycss.css
\ myfolders
src=/jquery/jquery.min.js

Open a lightbox link with simple jQuery

I have read a lot of answers and different questions but I can't find a clear answer to my problem.
I have this link in my html dom:
Title
I have these two files in the head function:
<script src="script/js/jquery-1.11.0.min.js"></script>
<script src="script/js/lightbox.js"></script>
When the page is loaded it needs to open the link inside the lightbox and people should navigate in the lightbox through the image group that is defined with the data-lightbox.
I tried using this at the end of the body:
<script>
$(".logo").click();
</script>
</body>
But no result :(.
Nothing happens. Page loads but the auto click doesn't do anything.
I had it working but then Lightbox didn't open up. Instead the image of the link was loaded.
All other codes in jQuery work between the script tags.
Am I missing something here?
Please help or ask if things are not clear enough. I am a newbie here and try to play by the rules of the forum.
Thanks in advance!

There are a couple of problems. The link you posted has the class MyClass and you probably need a document ready handler -
<script>
$(document).ready(function() {
$('.MyClass').click();
});
</script>
Which lightbox are you using? There may be additional requirements that you need to implement.

Embed Partial Gist File

I have a gist setup here. I use the following code to embed a single file from my gist to a webpage.
<script src="https://gist.github.com/4672365.js?file=1.java" type="text/javascript"></script>
But what I want is to embed a single line from file 1.java. You can say that I want to embed only line #2 from file 1.java into my webpage. Thanks in advance for help :)

After I got no helpful answers to this question, I tried myself to do some javascript coding. I have uploaded that code on github. The file on this link does the magic. To embed a single line into your webpage you need to add reference to my javascript file in HEAD tag. Here is a simple code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://github.com/kashif-umair/gist-embed/raw/feature/show_single_line/gist-embed.js" ></script>
</head>
<body>
<code id="gist-<YOUR_GIST_ID>" data-file="<YOUR_FILE_NAME_IN_GIST>" data-line="<LINE_NUMBER>"></code>
</body>
</html>
You need to replace YOUR_GIST_ID with the ID of your gist, YOUR_FILE_NAME_IN_GIST with the file name from which you want to embed the line and LINE_NUMBER with the line number in file which you want to embed.
NOTE:
If you want to embed a single line then both the file name and line number should be present in code tag.
If you want to embed multiple selective lines from a file then you should put values something like MS Word page ranges for printing. e.g. data-line="1-4,10,12-15". Please make sure that you used the correct syntax to put these values to avoid getting odd results.
If you want to embed whole file then remove the data-line attribute from code tag.
Hopefully I've helped for the people who have or will face this problem.
As I am continuously making changes to my javascript file so I think updating this answer every time is not a good idea at all. So from now I'll update the README.md file in the GitHub repository. Anyone having problems can visit the github to read README.md file. For reference I'm adding the link to my repository here.
https://github.com/kashif-umair/gist-embed
P.S: Please take a look at my javascript file in the github repository and suggest any good practices for coding.

The Right and fastest way to do is just append the .js address with ?file=file.name : )
<script src="https://gist.github.com/kashif-umair/4672365.js?file=MyApplication.java"></script>

Create a gist containing only the line you need.

Cant figure out why my images won't lazyload

Hey guys i can't seem to get lazyload to work at all on my page, and i can't understand why. I've looked around alot and still have no idea.
I need it as im desinging a new page for my band www.childrenoftheson.com/newindex/Newtest.html and since the whole site is run off one page i need to lazyload images to speed it up.
I would also love to know if anyone could point my in the right direction for lazyloading widgets.
Any help/rage is appreciated :D.

try pointing lazy load to the correct web path:
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
plus loading this way will mean your users might have already downloaded the file and thus saving them time on their page load.

To me it seems that the file which contains the jquery plugin (jquery.lazyload.js) cannot be found on your server. It seems to be located at http://www.childrenoftheson.com/jquery.lazyload.js. In your source code you are including it like this:
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
which resolves the wrong path.
If you are using Firefox, you maybe want to look at the 'Net'-Tab of Firebug to see which files cannot be found/loaded...

jquery lightbox working on one page, but not another on same site

A programmer installed jquery lightbox and everything was working fine on
http://www.ozhiphopshop.com.au/sub_photos.php?id=11
I wanted to use the exact same effect for the one image on
http://www.ozhiphopshop.com.au/product_detail.php?pro_id=69
In the included header file I've changed the changed the following script (which is working fine on the first page):
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
$('#gallery1 a').lightBox();
});
</script>
to:
<script type="text/javascript">
$(function() {
$('a.pro_img').lightbox();
});
</script>
but that doesn't seem to work. And the linked file is opening in a new window.
The div class for the file I want the lightbox to work with is 'pro_img' which is why I made the change the way I did.
I've made no changes to the css or the js files, which may be where I'm going wrong.
I'm not a programmer, so I've just been trying to reverse engineer what was done on the first page. I'm really interested in learning more about programming, hence the reason I'm doing it myself.
I've noticed the same question on here, but none of the answers seemed to relate to exactly what I'm dealing with.
Any help would be appreciated.
All the best,
Michael

change
$('a.pro_img').lightbox();
to
$('div.pro_img a').lightbox();