Simple Elevate Zoom plugin not working? - javascript

I need serious help with my code. I am pretty new to JavaScript so it could be something really simple.
I want to use a Jquery plugin called ElevateZoom.
I downloaded the plugin, linked the jquery and elevatezoom files (jquery is working fine) and copied the demo's code. The demo works fine, so what I do not get is on the exact same browser but on my page it does not work. I have been scratching my head for at least 3 hours over this and tried multiple things such as implementing the scripts internally, trying different versions of jquery, using different images etc. My HTML and JavaScript code is below (note my first block of javascript works):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jeff/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Jeff/script.js"></script>
<script src="Jeff/jquery.elevatezoom.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="test"></div>
<div class="logo"></div>
<nav>
<div class="container">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Deals</li>
<li>Store</li>
<li>Basket</li>
<li>Coming soon</li>
<li>Support</li>
</ul>
</div>
</nav>
<div class="main-container">
<div class="content">
<br>
<div class="ws_shadow"></div>
<hr>
<div class="contentbox-big2" style="margin-left: 0px;">
<div class="titlebox">
ADS
<div class="titleinfo"></div>
</div>
<div class="newscontent">
<img src="img/brit.png" alt="image" style="width:167px;height:258px;">
<br> <br> <hr> <br> <br>
<img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
<hr>
</div>
</div>
<div class="contentbox-big3" style="margin-left: 0px;">
<div class="titlebox">
Deals
<div class="titleinfo"></div>
</div>
<div class="newscontent2">
<img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png" data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
Pokemon Sun 3DS - £14.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
Player Unknown's Battlegrounds - £19.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
Battlefield 1 - £24.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</div>
<div class="soundcloud">
<iframe width="100%" height="80" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</html>
JavaScript code:
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});

Related

How to activate a cdn slick-carousel?

I am trying to use a slick-carousel with the link of CDN inside JavaScript tags above the closing body tag. However the link matches the one on the official website:https://cdnjs.com/libraries/slick-carousel, it does not work. It used to work properly before I fished creating a email system with PHPMailer. I do not know what causes this problem. If anyone who can kindly give me some solutions or advices, I would be glad.
main.js
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<section class="businessSec">
<h1>Brand Strategy • Web Design • Marketing</h1>
<div class="bContainer">
<div class="businessIcons">
<img src="img/brand.png" alt=""><p>BRANDING</p>
<img src="img/marketing.png" alt=""><p>MARKETING</p>
</div>
<div class="businessIcons2">
<img src="img/redesign.png" alt=""><p>REDESIGN</p>
<img src="img/webdesign.png" alt=""><p>MAKE A NEW SITE</p>
</div>
<div class="businessIcons3">
<img src="img/anyalizing.png" alt=""><p>ANALYSING</p>
<img src="img/seo.png" alt=""><p>SEO</p>
</div>
</div>
</section>
<div class="container">
<section class="infoBox">
<div class="photoBox" id="pos">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Redesign your exiting website ?</h1>
<p>• Sixty percent of the increase in the search of your website.<br><br>• Remaking a stress-free website by cutting the speed of loading your website.<br><br>• Using colors and fonts following the latest design trend</p>
</div>
</section>
<section class="infoBox2">
<div class="photoBox2">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox2">
<h1>Need your own website ?</h1>
<p>• I visualize your expectation<br><br>
• Find keywords for the best search for the web<br><br>
• Create a design with a strategic UX design<br><br></p>
</div>
</section>
<section class="infoBox">
<div class="photoBox">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Analysing your website ?</h1>
<p>JoeyNamiki Design checks the number of users who entered your website. Check the number of the clicks to each element. Also, we look at how the user found the website and how they browse on the website. After that, we suggest you the breakthrough for the problem.</p>
</div>
</section>
<section class="contactSection">
<h1>Let's do the first chat together and make a better website for the better futuer!</h1>
<button>CONTACT US</button>
</section>
<section class="clientSec">
<h1>client</h1>
<div class="clientIcons">
<img src="img/gofindai.jpg" alt="">
<img src="img/feelgoodetc.png" alt="">
<img src="img/spoofstore.png" alt="">
<img src="img/logo4.png" alt="">
</div>
</section>
<div class="ourWork">
<button>View Our Work</button>
</div>
<section class="cs">
<div class="awardTitle">
<h1>Client Review</h1>
</div>
<section id="userReview">
<div class="slick">
<div><p><i>I love your design. I think you are becoming a very good designer very soon. You have a really good sense. You need to study every single day. Keep going.</i><br><br><b>By the design supervisor at GoFind.ai in San Francisco</b></p></div>
<div><p><i>You are a hard worker. I want to hire you as a graphic designer.</i><br><br><b>By CEO at Spoofstore! in Toronto</b></p></div>
<div><p><i>I love your UX design and strategy whose route is coherent to our goal. Additionally, I follow your suggestion which SNS icons should be in the footer, not the tope of our website. I want to hire you as the COO and designer position.</i><br><br><b>By CEO at FeelGood.etc in Montréal.</b></p></div>
</div>
</section>
</section>
<div class="blogSec">
<h1>Check Our Blog</h1>
</div>
<section class="blogPost">
<div class="post">
<h1>The roots of Typography created by Jan Tschichold.</h1>
<p><br>As long as you are designers such as graphic, web, or editorial designs, you may have an experience to adjust each space between characters of header on your design...</p>
<button>Learn More</button>
</div>
</section>
<section class="blogPost2">
<div class="post">
<h1>The website below explains the usage of and what is callback function in JavaScript.</h1>
<p>If you have ever studied JavaScript before, maybe you may have an experience to be confused at what callback function in JavaScript is and how to use callback function. Even closure in JavaScript is really tricky. So, I found a good article to understand it. I will share the website. Hopefully, you will understand it.</p>
<button>Learn More</button>
</div>
</section>
<section class="newsLetter">
<h1><i>Better design info gives you better inspiration.</i></h1>
<form method="post" action="send2.php" class="contents">
<div><input type="text" name="name" placeholder="Name" required></div>
<div><input type="text" name="email" placeholder="Email" required></div>
<div><button type="submit" id="subButton" value="Subscribe">subscribe</button></div>
</form>
</section>
<hr>
<footer>
<section class="sns">
<i class="fa fa-linkedin fa-lg"></i>
<i class="fa fa-dribbble fa-lg"></i>
<i class="fa fa-instagram fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-github fa-lg" style="text-decoration:none"></i>
<i class="fa fa-youtube-play fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</section>
<p>®2020JOEYDESIGN All Rights Reserved</p>
</footer>
</div><!-- container -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>

$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 500, // autoplaySpeed: 1000, or autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="https://image.flaticon.com/icons/png/512/16/16049.png" width="1274px" height="640px" alt="">1</div>
<div><img src="https://image.flaticon.com/icons/png/512/16/16049.png" width="1274px" height="640px" alt="">2</div>
<div><img src="https://image.flaticon.com/icons/png/512/16/16049.png" width="1274px" height="640px" alt="">3</div>
</div>
</section>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<section class="businessSec">
<h1>Brand Strategy • Web Design • Marketing</h1>
<div class="bContainer">
<div class="businessIcons">
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>BRANDING</p>
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>MARKETING</p>
</div>
<div class="businessIcons2">
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>REDESIGN</p>
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>MAKE A NEW SITE</p>
</div>
<div class="businessIcons3">
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>ANALYSING</p>
<img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>SEO</p>
</div>
</div>
</section>
<div class="container">
<section class="infoBox">
<div class="photoBox" id="pos">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Redesign your exiting website ?</h1>
<p>• Sixty percent of the increase in the search of your website.<br><br>• Remaking a stress-free website by cutting the speed of loading your website.<br><br>• Using colors and fonts following the latest design trend</p>
</div>
</section>
<section class="infoBox2">
<div class="photoBox2">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox2">
<h1>Need your own website ?</h1>
<p>• I visualize your expectation<br><br>
• Find keywords for the best search for the web<br><br>
• Create a design with a strategic UX design<br><br></p>
</div>
</section>
<section class="infoBox">
<div class="photoBox">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Analysing your website ?</h1>
<p>JoeyNamiki Design checks the number of users who entered your website. Check the number of the clicks to each element. Also, we look at how the user found the website and how they browse on the website. After that, we suggest you the breakthrough for the problem.</p>
</div>
</section>
<section class="contactSection">
<h1>Let's do the first chat together and make a better website for the better futuer!</h1>
<button>CONTACT US</button>
</section>
<section class="clientSec">
<h1>client</h1>
<div class="clientIcons">
<img src="img/gofindai.jpg" alt="">
<img src="img/feelgoodetc.png" alt="">
<img src="img/spoofstore.png" alt="">
<img src="img/logo4.png" alt="">
</div>
</section>
<div class="ourWork">
<button>View Our Work</button>
</div>
<section class="cs">
<div class="awardTitle">
<h1>Client Review</h1>
</div>
<section id="userReview">
<div class="slick">
<div><p><i>I love your design. I think you are becoming a very good designer very soon. You have a really good sense. You need to study every single day. Keep going.</i><br><br><b>By the design supervisor at GoFind.ai in San Francisco</b></p></div>
<div><p><i>You are a hard worker. I want to hire you as a graphic designer.</i><br><br><b>By CEO at Spoofstore! in Toronto</b></p></div>
<div><p><i>I love your UX design and strategy whose route is coherent to our goal. Additionally, I follow your suggestion which SNS icons should be in the footer, not the tope of our website. I want to hire you as the COO and designer position.</i><br><br><b>By CEO at FeelGood.etc in Montréal.</b></p></div>
</div>
</section>
</section>
<div class="blogSec">
<h1>Check Our Blog</h1>
</div>
<section class="blogPost">
<div class="post">
<h1>The roots of Typography created by Jan Tschichold.</h1>
<p><br>As long as you are designers such as graphic, web, or editorial designs, you may have an experience to adjust each space between characters of header on your design...</p>
<button>Learn More</button>
</div>
</section>
<section class="blogPost2">
<div class="post">
<h1>The website below explains the usage of and what is callback function in JavaScript.</h1>
<p>If you have ever studied JavaScript before, maybe you may have an experience to be confused at what callback function in JavaScript is and how to use callback function. Even closure in JavaScript is really tricky. So, I found a good article to understand it. I will share the website. Hopefully, you will understand it.</p>
<button>Learn More</button>
</div>
</section>
<section class="newsLetter">
<h1><i>Better design info gives you better inspiration.</i></h1>
<form method="post" action="send2.php" class="contents">
<div><input type="text" name="name" placeholder="Name" required></div>
<div><input type="text" name="email" placeholder="Email" required></div>
<div><button type="submit" id="subButton" value="Subscribe">subscribe</button></div>
</form>
</section>
<hr>
<footer>
<section class="sns">
<i class="fa fa-linkedin fa-lg"></i>
<i class="fa fa-dribbble fa-lg"></i>
<i class="fa fa-instagram fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-github fa-lg" style="text-decoration:none"></i>
<i class="fa fa-youtube-play fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</section>
<p>®2020JOEYDESIGN All Rights Reserved</p>
</footer>
</div><!-- container -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>

$(document).ready(function () {
$(".slideshow ").slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: true,
dots: true,
pauseOnHover: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 520,
settings: {
slidesToShow: 1,
},
},
],
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section id="slideshow">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="slick slideshow">
<div><img src="https://i.stack.imgur.com/CU2dS.png" alt="" /></div>
<div><img src="https://i.stack.imgur.com/1vJZM.png" alt="" /></div>
<div><img src="https://i.stack.imgur.com/MNLGU.png" alt="" /></div>
<div><img src="https://i.stack.imgur.com/1944z.png" alt="" /></div>
<div><img src="https://i.stack.imgur.com/EMM82.png" alt="" /></div>
<div><img src="https://i.stack.imgur.com/RKXci.png" alt="" /></div>
</div>
</div>
</div>
</div>
</section>

Can't figure out why my site loads so slow

I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>

Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?

get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices

How to make jQuery find the .owl-video-frame class in Owl Carousel 2

I have a few videos in a carousel, with items entered like this:
<div id="owl4" class="owl-carousel owl-theme">
<div class="owl-item-container video-aspect-16-9" data-aspect="1.7777778">
<a class="owl-video" href="https://www.youtube.com/watch?v=1Dhn6yCygS8"></a>
<div class="owl-text-container">
<h2>This video is 19:9</h2>
<a class="owl-image-link" href="#">
<p>Some text.</p>
</a>
</div>
</div>
<div class="owl-item-container video-aspect-4-3" data-aspect="1.333333">
<a class="owl-video" href="https://www.youtube.com/watch?v=S03UOkb9zU4"></a>
<div class="owl-text-container">
<a class="owl-image-link" href="#">
<h2>This video is 4/3.</h2>
<p>Some text.</p>
</a>
</div>
</div>
</div>
The script is like this:
$(document).ready(function(){
$('#owl4').owlCarousel({
items:1,
margin:0,
dots:true,
video:true,
onPlayVideo: videoSize
});
function videoSize(event){
var video = $(document).find(".owl-video-frame");
console.log(video);
}
});
The carousel works. But I am trying to get jQuery to find the div with the class .owl-video-frame that Owl Carousel 2 adds when the video play symbol is clicked.
With the above code I can make iQuery find .owl-video-wrapper, which is the parent of .owl-video-frame and also added by Owl Carousel. If I do this and console.log I can see .owl-video-frame in the list of .owl-video-wrapper children. But I still can't make jQuery find .owl-video-frame or the iframe containing the youtube video.
I have the same problem if I use event instead of document.
What am I doing wrong?
EDIT
I can target the video that is currently playing because jQuery will find .owl-item.active. However, the problem is that jQuery won't find anything after .owl-video-wrapper so I can't 'get to' .owl-video-frame.
EDIT2
This is the entire code once the play button is clicked on the first video and the extra divs and iframe have been added by Owl Carousel:
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Owl Slider</title>
<link href="scripts/owl.carousel.css" rel="stylesheet">
<link href="scripts/owl.theme.default.css" rel="stylesheet">
<link href="scripts/stuff-style-carousel-3.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script src="scripts/owl.carousel.min.js">
</script>
</head>
<body>
<h1>Video with 100% width of the browser window and maintains its aspect ratio</h1>
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="owl4">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 1196px;">
<div class="owl-item active owl-video-playing" data-video="https://www.youtube.com/watch?v=1Dhn6yCygS8" style="width: 598px;">
<div class="owl-item-container video-aspect-16-9" data-aspect="1.7777778">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=1Dhn6yCygS8" style="display: none;"></a>
<div class="owl-video-frame">
<iframe allowfullscreen frameborder="0" height="251" src="//www.youtube.com/embed/1Dhn6yCygS8?autoplay=1&rel=0&v=1Dhn6yCygS8" width="100%"></iframe>
</div>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn" style="opacity:1;background-image:url(//img.youtube.com/vi/1Dhn6yCygS8/hqdefault.jpg)"></div>
</div>
<div class="owl-text-container">
<h2>This video is 19:9</h2><a class="owl-image-link" href="#">
<p>Some text.</p></a>
</div>
</div>
</div>
<div class="owl-item" data-video="https://www.youtube.com/watch?v=S03UOkb9zU4" style="width: 598px;">
<div class="owl-item-container video-aspect-4-3" data-aspect="1.333333">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=S03UOkb9zU4" style="display: none;"></a>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn" style="opacity:1;background-image:url(//img.youtube.com/vi/S03UOkb9zU4/hqdefault.jpg)"></div>
</div>
<div class="owl-text-container">
<a class="owl-image-link" href="#">
<h2>This video is 4/3.</h2>
<p>Some text.</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<button class="owl-prev" role="presentation" type="button"><span aria-label="Previous">‹</span></button><button class="owl-next" role="presentation" type="button"><span aria-label="Next">›</span></button>
</div>
<div class="owl-dots">
<button class="owl-dot active" role="button"><span></span></button><button class="owl-dot" role="button"><span></span></button>
</div>
</div>
<script>
$(document).ready(function(){
$('#owl4').owlCarousel({
items:1,
margin:0,
dots:true,
video:true,
onPlayVideo: videoSize
});
function videoSize(event){
var video = $(document).find(".owl-video-frame");
console.log(video);
}
});
</script>
</body>

You need to loop through each of your owl-video containers in order to get the individual videos.
$('.owl-video').each( function() {
var video = $(this).attr('href');
console.log(video);
})

JQuery Mini Menu - Navigation is not working

First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)

Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>

rotating an image 90 degrees using the jqueryRotate plugin

I dont know if this is possible. I have 10 images on a webpage. I want to be able to rotate any image i click on with the JQueryRotate script. I am just not such how to implement it. Any help will be appreciated
Here is my HTML Code of the Images
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>About Us</title>
<link rel="stylesheet" type="text/css" href="styles/about-us_style.css">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous">
$(document).ready(function() {
$('img').click(function() {
$(this).toggleClass('rotate');
});
});</script>
</head>
<body>
<div id=body-content>
<ul>
<li>Home Page<br></li>
<li>About us<br></li>
<li>Contact us<br></li>
<li>login<br></li>
</ul>
<div id=main_menu>
<p id=main-menu-paragrapf>
Car Gallery
</p>
<div id="car1" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/9.ferrari-dino.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Ferrari Dino (1968–1972)</span><br>Launched in 1968, came equipped with a V-6 instead of the typical V-12.</p>
</div>
</div>
<div id="car2" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/1.ferrari-250-gto_1.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Ferrari 250 GTO (1962-1964)</span><br>A stunning shape and incredible 3.0-liter V-12 makes this the definitive exotic. </p>
</div>
</div>
<div id="car3" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/6.porsche-550-spyder.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Porsche 550 (1953–1956)</span><br>The 550 Spyder was low-riding convertible that helped solidify Porsche's worldwide fame. </p>
</div>
</div>
<div id="car4" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/8.lamborghini-miura.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Lamborghini Miura (1966–1972)</span><br>The Miura was Lamborghini's original midengined supercar.</p>
</div>
</div>
<div id="car5" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/7.chevy-corvette.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Chevrolet Corvette (1963–1967)</span><br>The second generation Sting Ray marked the first fixed-roof Corvette coupe. </p>
</div>
</div>
<div id="car6" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/4.ferrari-330-p4.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Ferrari 330 P4 (1967)</span><br>Only three were ever made. The V12 put out up to 450 hp. </p>
</div>
</div>
<div id="car7" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/5.jaguar-e-type.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Jaguar E-Type (1961–1975)</span><br>Its famous shape hid a 5.3-liter V-12 under the long hood. </p>
</div>
</div>
<div id="car8" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/3.jaguar-xj13.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Jaguar XJ13 (1965)</span><br>The XJ13 is the greatest-looking designs. This prototype bridged the gap between D-Type and E-Type Jags </p>
</div>
</div>
<div id="car9" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/2.alfa-romeo-33.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Alfa Romeo 33 Stradale (1967–1971)</span><br>The Alfa's T33 race car may be the pinnacle European '60s automotive style. It's thought to be the first car with butterfly doors </p>
</div>
</div>
<div id="car10" class="polaroid">
<img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/10.mercedes-benz-300sl-gullwing.jpg" alt="Norway" style="width:100%">
<div class="container">
<p><span id="heading">Mercedes-Benz 300SL "Gullwing" (1955–1957)</span><br>The 300SL, famous for its gullwing doors that opened toward the sky, opens the top 10. Many have hailed the Benz as the world's first supercar. </p>
</div>
</div>
</div>
</div>
<div id=images>
<div id=logos>
<img src="http://www.otopark.com/wp-content/uploads/2016/02/volvo-cars-logo-emblem.jpg" alt="W3Schools.com" style="width:75px;height:75px;">
<img src="https://8096-presscdn-0-43-pagely.netdna-ssl.com/wp-content/uploads/2014/10/hyundai-logo.jpg" style="width:75px;height:75px;">
<img src="https://8096-presscdn-0-43-pagely.netdna-ssl.com/wp-content/uploads/2014/10/ferrari-logo.jpg" alt="W3Schools.com" style="width:75px;height:75px;">
</div>
</div>
<div id=footer>
Website developed
</div>
</body>
</html>

You don't need anything but standard jQuery! Use CSS3 transitions.
CSS:
img {
transition: 1s transform;
}
.rotate {
transform: rotate(180deg);
}
jQuery:
$(document).ready(function() {
$('img').click(function() {
$(this).toggleClass('rotate');
});
});
Of course, you can change the number of degrees of rotation to suit your needs

Categories

Resources