Develop Reference

Jquery Slider not working in my first ever website?

I started creating my first ever website(incomplete at the moment) just a few hours ago and got stumbled upon this problem. My jquery slider is not working but all three images for the slider appears on my website. I've already checked link rel directory path and changed it a couple of times but it's still not working. Hope you guys can help.
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
/**Here is the html(Main.html):** **Here is the css(styles.css):**/
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FEFBEF;
background-color: white;
}
.clearfix {
clear: both;
}
#wrapper {
margin: 0 auto;
max-width: 1120px;
background: #FEFBEF;
overflow: auto;
background-color: black;
}
#main_header {
width: 100%;
border: 1px solid black;
font-family: 'Black Ops One', sans-serif;
background-color: black;
color: white;
}
#main_header h1 {
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout {
margin: 50px 20px 0 0;
}
#callout h2 {
text-align: right;
color: white;
}
#callout p {
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu {
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li {
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a {
text-decoration: none;
color: black;
}
/*--- Start Image Slider --*/
.slider {
max-width: 1020px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img {
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a {
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 13px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 18px;
}
.slider .bx-wrapper .bx-next {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-arrow.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right- arrow.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
border: 1px solid black;
height: 50%;
background-color: white;
}
footer {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: white;
overflow: auto;
}
footer p {
margin-top: 1%;
}
/* **here is another css(jquery.bxslider.css):** */
.bx-wrapper {
max-width: 1020px;
position: relative;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 1020px;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
left: 0px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
max-width: 1020px;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url("img/bx_loader.gif") center center no-repeat #fff;
height: 100%;
max-width: 1020px;
;
position: relative;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url("img/controls.png") no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url("img/controls.png") no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: relative;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/smiley1.jpg"/></li>
<li><img src="../Music Store/img/smiley2.jpg"/></li>
<li><img src="../Music Store/img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"> </section>
<section class="one-third"> </section>
<section class="one-third"> </section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
</body>
</html>
Here is also a screenshot of my folder:

You can Just use the slick jquery plugin that works great and also makes your slider accessible.
Or, if you want you can use frameworks like Bootstrap Carousel or Foundation Orbit that also will do the job and will make your coding for web styling easier.
Good Luck :)

Include jquery from CDN - https://code.jquery.com/
Add $(function(){ }) - http://api.jquery.com/jquery/#jQuery-callback
Correct img path
And this is your correct Main.html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<script type="text/javascript">
$(function(){
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
});
$('.slider2').bxSlider({
pager: false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
controls: false,
});
})
</script>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="img/smiley1.jpg"/></li>
<li><img src="img/smiley2.jpg"/></li>
<li><img src="img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"></section>
<section class="one-third"></section>
<section class="one-third"></section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>

DOM Transitions not working on different resolution screen?

I was creating a scrolling effect such that when i scroll to the second page, only then will the download button will fade in, and on scrolling to third page, contribute button fades in. I have a laptop with screen resolution of 1366 x 768, but when my friend opened the website, he could not see the transition unless he zoomed in. His screen resolution was 1920 x 1080.
Now how do i ensure that as soon as the user scrolls down to the location where the download/contribute buttons are hidden, then only the buttons fade into visibility.(so as to say, a method to know when did the element appear into view of window.)
PS. no jQuery please. pure JS solution wanted. Also it will be great if one can explain why this problem is happening in screens of different resolution.
var download = document.getElementById("download");
var contribute = document.getElementById("contribute");
document.addEventListener("scroll", checkVisible);
function checkVisible() {
var scr = window.pageYOffset;
if (scr >= 400) {
download.style.opacity = "1";
download.style.left = "80%";
}
if (scr >= 900) {
contribute.style.opacity = "1";
contribute.style.left = "5%";
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
#page1 {
width: 100%;
height: 700px;
position: relative;
z-index: -2;
border-bottom: 2px solid black;
}
#title {
position: relative;
top: 200px;
width: 500px;
height: 90px;
font-size: 40px;
margin: 0 auto;
text-align: center;
color: white;
text-shadow: 1px 0 2px black, 0 1px 2px black, -1px 0 2px black, 0 -1px 2px black;
}
#fadetitle {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 10px;
}
#title h1 {
position: relative;
z-index: 0;
top: -5px;
}
#aboutsite {
position: absolute;
width: 90%;
z-index: 0;
color: white;
top: 450px;
text-align: center;
margin-left: 5%;
font-size: 25px;
}
#page2 {
width: 100%;
height: 500px;
background-size: cover;
position: relative;
border-bottom: 2px solid black;
}
#downloadtext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 35%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
.choice {
display: block;
width: 180px;
height: 50px;
background-color: #4d94ff;
text-align: center;
border: 1px solid black;
border-radius: 15px;
box-sizing: border-box;
text-decoration: none;
position: relative;
}
.choice p {
margin-top: 15px;
font-weight: bold;
color: black;
}
.choice:hover {
cursor: pointer;
background-color: #0052cc;
}
#download {
top: 225px;
left: 85%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#page3 {
width: 100%;
height: 500px;
background-attachment: fixed;
background-size: cover;
position: relative;
}
#contribute {
top: 225px;
left: 1%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#contributetext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 25%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page1">
<div id="fade"></div>
<div id="title">
<div id="fadetitle"></div>
<h1</h1>
</div>
<p id="aboutsite"></p>
</div>
<div id="page2">
<a id="download" class="choice" href="#">
<p>DOWNLOAD</p>
</a>
<p id="downloadtext"></p>
</div>
<div id="page3">
<a id="contribute" class="choice" href="contribute.html" target="_blank">
<p>CONTRIBUTE</p>
</a>
<p id="contributetext"></p>
</div>
<script src="script.js"></script>
</body>
</html>

Repetitive images in fancyBox

I have a fancyBox which works well besides the fact, that on certain images it slides the same image for few times. Here is the web page.
I do not use any other jQuery or my own scripts, only fancyBox scripts.
Here is the code I am using:
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
#albums-bar-shape {
width: 1141px;
height: 25px;
margin: 0 auto 0px auto;
position: relative;
/*background-color: #e7e7e7;*/
}
#album {
width: 1150px;
height: 850px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
top: 20px;
}
.albums-bar {
position: relative;
float: right;
left: -50%;
}
.albums-bar ul {
list-style: none;
position: relative;
left: 50%;
}
.albums-bar li {
float: left;
margin-right: 50px;
list-style-type: none;
}
.albums-bar a {
color: #8c8c8c;
font-size: 13pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
.albums-bar a:hover {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
text-decoration: none;
}
#selected-album {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
}
/*Vertical photos formatting*/
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
/*Horizontal photos formatting*/
div.img-wide {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 370px;
}
div.img-wide:hover {
border: 1px solid #777;
}
div.img-wide img {
width: 100%;
height: auto;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
margin: 0px;
padding: 0px;
background-image: url(images/img-noise-361x370.png (1));
background-repeat: repeat;
}
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
#logo {
width: 650px;
height: auto;
margin: 30px auto 30px auto;
display: block;
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/custom.css">
<link rel="stylesheet" type="text/css" href="../../css/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../css/crossfade.css">
<link rel="stylesheet" type="text/css" href="../../css/portfolio.css">
<link rel="stylesheet" href="../../src/css/bootstrap.min.css"/>
<title>Car Photos</title>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<img id="logo" src="http://feanor.cz/images/logo_studio.gif">
<div id="top">
<div id="menu-bar">
<ul>
<li>Home</li>
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="albums-bar-shape">
<div class="albums-bar">
<ul>
<li>Fashion portraits</li>
<li>Art portraits</li>
<li><a id="selected-album" href="#">Car photography</a></li>
<li>Product photography</li>
<li>Interior photography</li>
</ul>
</div>
</div>
<div id="album">
<div class="img-wide">
<a class="fancybox" rel="group" href="1.jpg">
<img src="1.jpg" alt="image 1" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="2.jpg">
<img src="2.jpg" alt="image 2" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="6.jpg">
<img src="6.jpg" alt="image 3" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="4.jpg">
<img src="4.jpg" alt="image 4" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="5.jpg">
<img src="5.jpg" alt="image 5" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="3.jpg">
<img src="3.jpg" alt="image 6" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="7.jpg">
<img src="7.jpg" alt="image 7" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="8.jpg">
<img src="8.jpg" alt="image 8" width="300" height="200">
</a>
</div>
</div>
</body>
</html>

You forgot to close a few of the anchor tags. #6 and #3.
As a result, the browser adds another link which makes fancyBox think there are duplicate images. Here's how Chrome is compiling the code:

Content doesn't show up on toggle button with jQuery

i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.
HTML:
<div id="toggle">
<div id="poptext"> toggle </div>
<div id="box">
<p> hello</p>
</div>
</div>
CSS:
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
JAVASCRIPT:
<script>
window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
$(document).ready(function () {
$('#poptext').click(function () {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
});
</script>

There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
<div id="toggle">
<div id="poptext">toggle</div>
<div id="box">
<p>hello</p>
</div>
</div>

4-ways animation slideshow jQuery

I'm trying to fix a script so that I can toggle another div and show the content inside that div with an slideshow animation in jQuery. It dosen't work at all, so some help would be appericated.
<script type="text/javascript">
function toggleDivs(currentDiv)
{
if (currentDiv == 'music')
{
var $inner = $("#music-box");
}
else
{
var $inner = $("#inner");
}
if($inner.position().left == 0)
{
$inner.animate({
left: "400px"
});
}
else
{
$inner.animate({
left: "0px"
});
});
});
</script>
Heres the DIVS:
<div id="shadow"></div>
<div id="header">
<div class="navigation">
ARTIST
MUSIC
ABOUT
CONTACT
</div>
</div>
<div id="content">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F110558300"></iframe>
<iframe width="100%" height="166" scrollnig="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F108205158"></iframe>
<div id="target">
Dubstep
Electro House
</div>
<div class="contentbox">
<div id="inner">
<div id="music-box">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-widget">
<img src="http://dustla.com/images/soundcloud.png" alt="soundcloud"/>
<img src="http://dustla.com/images/twitter.png" alt="twitter"/>
<img src="http://dustla.com/images/facebook.png" alt="facebook"/>
<img src="http://dustla.com/images/youtube.png" alt="youtube"/>
</div>
</div>
Heres the CSS code:
/*************
STYLESHEET
*************************/
html, body {
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto !important;
overflow-x: hidden;
font-family: verdana;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body{
}
#header
{
width: 100%;
height: 145px;
background-color: #fff;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
position: relative;
z-index: 1;
}
#shadow
{
width: 100%;
height: 163px;
background-image: url('http://dustla.com/images/h_shadow.png');
background-repeat: repeat-x;
position: absolute;
z-index: 1;
margin-top: 30px;
}
.navigation a
{
border-bottom: 2px solid #000;
font-family: Comic Sans MS;
font-size: 24px;
color: #000;
margin-right: 50px;
text-decoration: none;
width: auto;
text-align: center;
}
.navigation
{
width: 600px;
margin: 0 auto;
padding-top: 50px;
}
.navigation a:hover
{
border-bottom: 5px solid #000;
}
#content
{
height: auto;
position: relative;
padding-top: 250px;
padding-bottom: 400px;
margin-bottom: -41px;
width: auto;
background-color: #ffF;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.contentbox
{
width: 100%;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
/*height: auto;
margin-top: -780px;
background-color: #fff;
position: relative;
padding-right: -200px;
max-height: 750px;*/
overflow: hidden;
}
#footer
{
width: 100%;
height: 72px;
position: relative;
bottom: 0;
background-image: url('img/bg.png');
margin: 0;
color: #fff;
opacity: 0.9;
margin-top: 25px;
}
#footer-widget
{
width: 260px;
height: 28px;
float: right;
margin-right: 5px;
margin-top: 15px;
}
#footer-widget a
{
margin-right: 20px;
}
/*********************
JQUERY SLIDESHOW
**********************/
#slideshow
{
background-color: #000;
width: 400px;
height: 200px;
margin: 0;
position: relative;
}
#inner
{
background-color: #F00;
width: 100%;
height: 200;
margin: 0;
position: absolute;
}