GalleryView Jquery - javascript

I am trying to implement this JqueryGallery to my website(big gray box). Now my problem is that the images doesn't appear.
Here my website
here is my header code:
<link href="css/galleryview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 655,
panel_height: 336,
transition_speed: 1500,
transition_interval: 5000,
nav_theme: 'dark',
border: '1px solid white',
pause_on_hover: true,
});
});
</script>
Here is my gallery code:
<div id="photos" class="galleryview">
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
<p>Photo by tomharry. View full-size photo here.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/02.jpg" />
<div class="panel-overlay">
<h2>Eden</h2>
<p>Photo by emsago. View full-size photo here.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/03.jpg" />
<div class="panel-overlay">
<h2>Snail on the Corn</h2>
<p>Photo by baines. View full-size photo here.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/04.jpg" />
<div class="panel-overlay">
<h2>Flowers</h2>
<p>Photo by jazza. View full-size photo here.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/06.jpg" />
<div class="panel-overlay">
<h2>Alone Beach 2B</h2>
<p>Photo by sgursozlu. View full-size photo here.</p>
</div>
</div>
</div>


Glad you figured it out. But just for your information, to take advantage of the new script 2.1.1: your code should look like:
<ul id="photos" class="galleryview">
<li>
<img src="http://spaceforaname.com/img/gallery/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
<p>Photo by tomharry. View full-size photo here.</p>
</div>
</li>
<li>
<img src="http://spaceforaname.com/img/gallery/02.jpg" />
<div class="panel-overlay">
<h2>Eden</h2>
<p>Photo by emsago. View full-size photo here.</p>
</div>
</li>
<li>
<img src="http://spaceforaname.com/img/gallery/03.jpg" />
<div class="panel-overlay">
<h2>Snail on the Corn</h2>
<p>Photo by baines. View full-size photo here.</p>
</div>
</li>
<li>
<img src="http://spaceforaname.com/img/gallery/04.jpg" />
<div class="panel-overlay">
<h2>Flowers</h2>
<p>Photo by jazza. View full-size photo here.</p>
</div>
</li>
</ul>
As you can see, the code is cleaner and it's more HTML-wise semantically correct (look up on Divitis) so it might be worth upgrading. :)


Figured out the problem it was a conflict between 2 scripts..

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

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

js css slider tutorial issue

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

How do I get the src of images when clicked on Fabric.js canvas?

i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>

You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});

You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready

You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}

Categories

Resources