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
Related
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>
There is a site (http://f0347217.xsph.ru/about.html) on which, when first run at resolutions above 1920, the layout at the first load is displayed incorrectly - the font, leading, and distance between objects are reduced. At the same time, when you move around the site for a while and return to the original page, everything returns to normal. The site is written in fullpage js. codepen link https://codepen.io/RukUndead/pen/xxxzEKZ
<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery//2.2.0/jquery.min.js></script>
<link rel=stylesheet id=six_mainstyle-css href=./artfiles/mainbig.css type=text/css media=all>
<link rel=icon href=favicon.ico type=image/x-icon>
<link rel="shortcut icon" href=favicon.ico type=image/x-icon>
<link rel=stylesheet href=https://use.fontawesome.com/releases/v5.0.13/css/all.css integrity=sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp crossorigin=anonymous>
<link rel=stylesheet href=https://unpkg.com/swiper/css/swiper.min.css>
<link rel=stylesheet href=./artfiles/fullpage.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css>
<title>About</title>
<style media=screen>.bg-init,.animsition-overlay-slide{background:#f3f2ed;z-index:9999}.overlay-slide-in-left{background:#f3f2ed;z-index:9999}</style>
</head>
<body class=bg-init id=clrmen>
<div class=animsition-overlay>
<nav class="l-nav pushy pushy-left">
<ol>
<ul id=menu-primary-menu class=l-nav__menu>
<p><li id=linkin><a id=linkinclr4 class=animsition-link href=gallery.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Gallery</div></a></li></p>
<p><li id=linkin><a id=linkinclr2 class=animsition-link href=about.html data-animsition-out-class=overlay-slide-out-left><div class=ml>About</div></a></li></p>
<p><li id=linkin><a id=linkinclr3 class=animsition-link href=courses.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Courses</div></a></li></</p>
<p><li id=menu-item-615 class="js-site-underlay-trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-615"><a href=https://www.artimpress.com/about.html/><div class=ml>Contact</div></a></li></p>
</ul>
<ul class="l-nav__menu l-nav__menu--secondary">
<div class=l-nav__logo>
<img src=./img/artlogom.png></div>
</li>
</ul>
</nav>
<div class="site-burger site-burger--left [ menu-btn ]" data-pushy-dir=left>
<span></span>
<span></span>
<span></span>
</div>
<div class=site-transition></div>
<div class=site-transition__inner>
</div>
<div class=site-overlay></div>
<div class=site-underlay>
<div class=site-underlay__close>
<div class=c-close><span></span><span></span></div>
</div>
<div class=site-underlay__content>
<div class=row>
<div class="columns small-20 medium-offset-9 medium-11 xlarge-offset-8 xlarge-12 xlarge-offset-11 xlarge-9 xxlarge-offset-13 xxlarge-7">
<div class=m-page>
<ul>
<p style=font-family:Thin><strong>Address</strong></p>
<p>Saint-Peterburg,</p>
<p>Mokhovaya str. 42</p>
<p> Metro st. Gostiny Dvor</strong></p>
<div class=cont><p style=font-family:Thin><strong>Contact</strong></p>
<p>impress.art#yandex.ru </p></div>
<div class="circle-effect circle-effect-1a"><div class=block010>
</i></div>
</i></i></div>
<div class=circle><i class="fab fa-instagram"></i></div>
</i></div>
</i></i></div>
</i></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=site-mark>
</div>
</div>
</div>
<div id="myContainer">
<div class="section">
<div class="slide"><div class="txtblock1">
<div class="textline"></div>
<div class="fadeInM1"><h1> About</h1></div>
<div class="fadeInM2"><h3>Direction</h3></div>
<div class="fadeInM3"><p>The Art Impress is a private international art school where you can get knowledge and skills in classical visual arts:</p>
<ul><li>• Academic drawing;</li>
<li>• Academic painting;</li>
<li>• Academic sculpture;</li>
<li>• Analogue photography<br>   and cinematography.</li></ul></div>
</div><div class="nmrblock2"><div class="fadeInM3" style="color: #cdccc8;">01</div></div>
<div class="fadeInM3"><div class="imgblock1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-01.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div></div>
<div class="section" >
<div class="slide"><div class="txtblock" >
<div class="textline"></div>
<h1> About</h1>
<h3>Tutors</h3>
<p> During your studies in The Art Impress you can develop your artistic skills and rapidly upgrade your professional art competencies in our powerful environment consisted of well-trained students and highly qualified tutors. Our tutors are graduates of The Saint-Petersburg State Repin Academic Institute of Painting, Sculpture and Architecture.</p>
</div><div class="nmrblock2">02</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-02.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-02.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Objective</h3>
<p>Our mission is valuable knowledge transfer from professional instructor to student in face-to-face communication.</p>
</div><div class="nmrblock2">03</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-3.2.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-3.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Education</h3>
<p>Every syllabus is tailor-made, it depends on your goals and level of training:</p>
<ul>
<li>• Advanced training</li>
<li>• Requalification</li>
<li>• Hobby for your soul</li>
<li>• Entrance exam preparation <br>   for institutes of fine arts</li></ul>
</div><div class="nmrblock2">04</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-04.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-4.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div>
<div class="section"><div class="fadeInM1">
<div class="slide"><div class="txtblock4">
<div class="textline"></div>
<h1> About</h1>
<h3></h3>
<p>In The Art Impress there are classes on regular bases and also intensive sessions are available if you come to Saint-Petersburg from other regions of Russia or from abroad for a limited time. Classes take place in our studio, museums of Saint-Petersburg and plein air. In The Art Impress you study with complete immersion in creative educational environment and gain considerable experience in fine arts.</p>
</div><div class="nmrblock3">05</div>
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-05.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-5.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide">
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="fadeInM2"><div class="txtblock3">
<div class="fl1">To be cultured,</div><div class="fl2">Is to be relevant</div>
<div class="fl3"> Saint-Peterburg
<br>
Mokhovaya str. 42 <br>Metro st. Gostiny Dvor <br><br>impress.art#yandex.ru</div>
<div class="l-nav__logo2">
<img src="./img/artlogo.png " >
</div>
<p></p>
<div class="circle-effect circle-effect-1a"><div class="icons">
<div class="circle"><i class="fab fa-twitter"></i></div>
<div class="circle"><i class="fab fa-facebook-f"></i></i></div>
<div class="circle"><i class="fab fa-instagram"></i></div>
<div class="circle"><i class="fab fa-youtube" ></i></div>
<div class="circle"><i class="fab fa-vk"></i></i></div>
<div class="circle"><i class="fab fa-telegram-plane"></i></i></div></div>
</div>
</div>
</div>
</div>
<script type=text/javascript src=fullpage.scrollHorizontally.min.js></script>
<script type=text/javascript src=https://unpkg.com/fullpage.js/dist/fullpage.extensions.min.js></script>
<script type=text/javascript>new fullpage("#myContainer",{sectionsColor:["#f3f2ed","#5c5d62","#5c5d62","#5c5d62","#5c5d62","#f3f2ed"],anchors:["firstPage","secondPage","3rdPage","4thpage"],menu:"#menu",slidesNavigation:false,scrollBar:false,licenseKey:"INSERT YOUR FULLPAGE LICENSE KEY HERE",controlArrows:false,keyboardScrolling:false,scrollHorizontally:true,scrollHorizontallyKey:"71E55697-D9CA4722-B12417FB-6467B0C3",normalScrollElements:".scrollable-content",});</script>
<script type=text/javascript src=./artfiles/mainbig.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js integrity="sha256-8y2mv4ETTGZLMlggdrgmCzthTVCNXGUdCQe1gd8qkyM=" crossorigin=anonymous></script>
<script src=https://unpkg.com/swiper/js/swiper.min.js></script>
<script>var swiper=new Swiper(".swiper-container",{speed:3600,pagination:{el:".swiper-pagination",},autoplay:{delay:5000,},});</script>
<script>$(document).ready(function(){$(".animsition-overlay").animsition({inClass:"overlay-slide-in-left",outClass:"overlay-slide-out-left",overlay:true,overlayClass:"animsition-overlay-slide",overlayParentElement:"body"}).one("animsition.inStart",function(){$("body").removeClass("bg-init");$(this).find(".item").append('<h2 class="target">Callback: Start</h2>');console.log("event -> inStart")}).one("animsition.inEnd",function(){$(".target",this).html("Callback: End");console.log("event -> inEnd")})});</script><script>
$(document).ready(function() {
$('.animsition-overlay').animsition({
inClass: 'overlay-slide-in-left',
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
})
.one('animsition.inStart',function(){
$('body').removeClass('bg-init');
$(this)
.find('.item')
.append('<h2 class="target">Callback: Start</h2>');
console.log('event -> inStart');
})
.one('animsition.inEnd',function(){
$('.target', this).html('Callback: End');
console.log('event -> inEnd');
});
});
</script>
<script>
$( "#linkinclr" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr2" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr3" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr4" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
</script>
</body>
</html>
Please check the sequence of file gets load.
Make sure your css should load first and at last you can load your js files
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
I have created a One page website, with a scroll down navbar. Meaning if I click on one of the links, the webpage will scroll down to the section based on which link was clicked on. The problem is if I were to click on the last navbar link which is contact us, the webpage will scroll all the way to the bottom of the page which it is supposed to do, however it buffers/or stalls at one point(meaning it does not scroll smoothly). How do I fix this?
I am using the latest version of google chrome.
The scrolling stall happens near the services section of the webpage. This only happens if I land on the page the first time or if I refresh the page. If I were to click on contact us, then go back to the top of the page where the navbar is located, and do this again, I do not get a scroll stall.
Below is the html code-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`device-width`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 950);
return false;
}
}
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
Who
Services
Portfolio
Contact
</div>
</div>
<div class="Who">
<h1 id="Who">Who are we ?</h1>
<p class="whodesc">Cabin is a website theme I created to demonstrate my skills as a front-end web developer. This website uses stock photos free of property and commercial rights.
</p>
<p class="whodesc">Cabin is a single page website that uses a scrollspy to navigate to different sections of the website.
</p>
<p class="whodesc">
Cabin is seperated into different sections, the first being home page with Navbar. Following straight after is the Who are we section which details what this website is about. After that we have a portfolio section where I have created an image gallery
with modal popup. When the user clicks on an image, a model is shown with both an image and brief description of the property.
</p>
<p class="whodesc">
Following after the portfolio section, the user is now brought over to see our services. Here we describe to the viewer/user what we do etc....
</p>
<p class="whodesc">
After scrolling some more, the user is then brought to our contact us page, which has a contact form. This contact form is split into a two columns, the first housing the google maps api, the second showing contact us form.
</p>
<p class="whodesc">Lastly we have the footer...</p>
<div class="Services">
<h1 id="Services">Services</h1>
<div class="leftcol">
<h2>Design/Build</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="houseOne.jpeg" class="img" alt="" >
</div><div class="rightcol">
<h2>Pre-construction Design and Estimating</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="design.jpg" class="img" alt="" ></div><div class="leftcol">
<h2>Construction Services</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div><img src="construction.jpeg" class="img" alt="" ></div>
</div>
<div class="Portfolio">
<h1 id="Portfolio">Portfolio</h1>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
<div class="Contactus">
<h1 id="Contact">Contact Us</h1>
<div class="con">
<div style="text-align:Center">
<h3>Contact Form</h3>
<div style="text-align:Center">
<div style="text-align:left">
<div class="rws">
<div class="cols">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div class="cols">
<form action="/action_page.php">
<label class="fname" for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label class="email" for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email....">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p id="ft">Website created by Andrew B <br> Date created: 03/04/2016</p>
</div>
</div>
</body>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(25.7616798, -80.1917902);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlu8CXtmhjEntaf3I_IS0dMJQDRFvpw6U&callback=myMap"></script>
</html>
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..