sorry for my English.. I'm very new to javascript...
My code for small gallery build with ekko-lightbox and the Zoom with elevatezoom.
Here can show all my code.
Javascript
<!--- open window small image gallery --->
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
<!--- hover small image gallery and display on big window --->
var thumbSelect = document.querySelectorAll('.thumb'),
windowSelect = document.querySelector('.window'), thumbCount;
for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) {
thumbSelect[thumbCount].onmouseover = function() {
windowSelect.src = this.src;
};
};
<!--- zoom window --->
$('#zoom_05').elevateZoom({
zoomType: 'inner',
cursor: 'crosshair',
});
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img id="zoom_05" src="https://i.imgur.com/51pNImi.png" width="200" height="200" class="window" data-zoom-image="https://i.imgur.com/rt5G4Ol.jpg" >
</div>
</div>
<div class="row">
<a href="https://i.imgur.com/51pNImi.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" id="lalo" style="border-style: solid; border: 1px solid #b3b3b3; width: 5.2%;" >
<img src="https://i.imgur.com/rt5G4Ol.jpg" class="img-fluid thumb" >
</a>
<a href="https://i.imgur.com/S94Kz2A.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" style="border-style: solid; border: 1px solid #b3b3b3; width: 10%;">
<img src="https://i.imgur.com/cneOtx6.jpg" class="img-fluid thumb" >
</a>
</div>
</div>
My question, how does that zoom display on the grosse-bild Div, because now it displays only on kleine-fenster Div.
Can please someone explain with easy words how to solve this problem ?
This solution is similar to what you want:
var zoomConfig = {cursor: 'crosshair', zoomType: "inner" };
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.hover(function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
.grosse-bild { position: relative;margin-left: 0;width: 70%; display: block;
float: left; box-sizing: border-box;
}
.grosse-bild > img{ position:relative; max-height:100%; max-width: 100%;
vertical-align: middle;
border: 0;}
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
display: block;
overflow: hidden;
height: 350px;
margin-bottom: 1em;
border: 1px solid #d8d8d8;
text-align: center;
line-height: 350px;
cursor: pointer;
}
#gallery_01{
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="100%" />
</div>
</div>
<div id="gallery_01">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg">
<img class="window" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" width="100" />
</a>
</div>
</div>
Just adjust style you want.
Related
i'm new in JavaScript Programming. I have some problem. I added some picture that i want to be slideshow with previous and next buttons.
const carouselSlide = document.querySelector('.carouselImage');
const carouselImages = document.querySelectorAll('.carouselImage img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click',()=>{
carouselSlide.style.transform = 'transform 0.4s ease-in-out';
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
First image and last image are duplicated becouse I want smoothness in this.
Look on the HTML Code
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Benedykt Borowski</title>
<meta name="description" content="Młody człowiek cieszącym się życjem"/>
<meta name="keyword" content="Młody, blog, programista, cieszący się życiem"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="CSS/styleshets.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;700&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
</style>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="ParentDiv">
<div id="IndexName">
<h1>Banedykt Borowski</h1>
</div>
<div class="Menu-side-bar" id="IndexMenu">
<ul class="active"> Home</ul>
<li>About me
<div class="drop-down-menu">
<ul>
<li>My bedroom</li>
<li>My workspace</li>
</ul>
</div>
</li>
<li>My travels</li>
<li>My work</li>
<li>My Studing</li>
</div>
<div id="indexText>">
<div id="indexFirstWords">
<p>Witam,<br>
Jestem młodym człowiekiem chcącym pokazać wszystkim ludziom kim jestem,
co robie, jak korzystam z życia i oczywiście jak żyje.</p>
<p>Odrazu odsyłam do zakładek po lewej stronie! <br>
Tam dowiecię się o mnie trochę więcej :D</p>
<p>A jeżeli chcecie poczytać odrazu to na dole pare rzeczy!</p>
<p> Może zacznijmy od moich stanowisk które posiadałem przez większość życia</p>
</div>
<div class="carouselSlide">
<div class="carouselImage">
<img src="./img/setup/FifthPicOfSetup.png" id="LastClone" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" alt="">
<img src="./img/setup/SecondPicOfSetup.jpg" alt="">
<img src="./img/setup/ThirdPicOfSetup.jpg" alt="">
<img src="./img/setup/FourthPicOfSetup.png" alt="">
<img src="./img/setup/FifthPicOfSetup.png" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" id="FirstClone" alt="">
</div>
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
</div>
</body>
</html>
And CSS file:
.Menu-side-bar{
background-color: aliceblue;
list-style-type:none;
width: 10%;
text-align: left;
font-family: 'Lato', sans-serif;;
font-weight: 300;
}
.Menu-side-bar ul{
padding: 5%;
}
.Menu-side-bar li{
padding: 3%;
}
.Menu-side-bar a{
text-decoration: none;
color: black;
}
.Menu-side-bar li:hover{
color: white;
background-color:green ;
}
.active{
color: white;
background-color:green ;
}
#ParentDiv{
width: 100%;
text-align: center;
}
#IndexName{
display: inline-block;
width: 100%;
color: black;
background-color: aliceblue;
}
#IndexMenu{
float: left;
}
#indexText{
float: left;
}
.drop-down-menu{
display: none;
}
.Menu-side-bar li:hover .drop-down-menu{
display: block;
position: absolute;
background-color: aliceblue;
width: 10%;
padding: 0.1%;
margin-left: -0.3%;
}
#indexFirstWords{
width: 50%;
text-align: center;
display: inline-block;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.carouselSlide{
width: 27%;
margin: auto;
}
.carouselImage{
display: flex;
width: 100%;
height: 500px;
}
Don't know what happend there, my friend is doing it and it works perfectly.
Thanks for all help!
I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows
But for some reason, the code shows up like this:
I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..
Here is the code:
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
})
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
#dog {
width: 70%;
height: 70%;
}
#mother {
width: 70%;
height: 70%;
}
#soldier {
width: 70%;
height: 70%;
margin-top: 50%
}
#teacher {
width: 70%;
height: 70%;
margin-top: 50%;
}
.button {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 60%;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #242424;
}
.button:active {
background-color: #121212;
}
.button>span {
color: #eeeeee
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
</a>
<a href="styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -
Flushing footer to bottom of the page, twitter bootstrap
and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -
body {
padding-bottom:150px;
}
fixed-bottom {
margin-top:-150px;
}
with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
$('#button-confirm').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
$('#button-confirm').show();
})
let slidePosition = 0
const slides = document.querySelectorAll(".slidecontainer .slide")
const totalSlides= slides.length
const nextButton= document.querySelector("#prev-btn")
const prevButton= document.querySelector("#next-btn")
console.log(nextButton, prevButton)
console.log (slides[0].classList)
function updateSlidePosition (){
slides[slidePosition].classList.remove("visible-slide")
slides[slidePosition++].classList.add("visible-slide")
}
function moveToNext(){
if (slidePosition === totalSlides-1) {
slidePosition = 0}
else {slidePosition++}
updateSlidePosition ()
}
function moveToPrev() {
if (slidePosition < 0) {
slidePosition === totalSlides-1}
else {slidePosition--}
updateSlidePosition ()
}
nextButton.addEventListener("click", moveToNext, false)
prevButton.addEventListener("click", moveToPrev, false)
/*Global Styles
---------------------------*/
body {color:#1f1f2d; margin: 0px auto; font-family: 'Montserrat', sans-serif; overflow-y: auto; font-size:16px; overflow-x: auto; background-color: black;}
.borderstyle section {border-top: 9px solid #14141b;}
/*Intro
---------------------------*/
header {background-color: black; margin-bottom: 2px;}
/*Main Navigation
---------------------------*/
/*Events ------------ */
.events {background-color: black;}
.slidecontainer {position:relative;max-width:80%; max-height:50%;}
.slidecontainer .slide img{max-width:65%; max-height:40%; margin: 1%; box-shadow: 2px 2px 30px 2px #999999; border-radius: 10px;}
.slidecontainer .slide, .slide .slide-hidden {display:none;}
.slidecontainer .visible-slide{display: block;}
.slidecontainer .slider-actions {display:flex; position:absolute; justify-content: space-between; top:50%; transform: translateY(-65%); width: 65%;margin:1.2em;}
.slidecontainer button {display: flex; font-size: 1.5em; font-weight:bolder; border-radius: 40%; background-color: whitesmoke; font-family: serif; box-shadow: 2px 4px 15px 5px black; padding:2%;}
/*Media Queries
---------------------------*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a relevant page title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href= "D:\coding\CSS\raunaq-project\Stylestest.css" type="text/css">
<script src="D:\coding\CSS\raunaq-project\newJStest.js" defer></script>
</head>
<body>
<main>
<!-- *********************** MAIN NAVIGATION *********************** -->
<header>
</header>
<!-- *********************** END OF MAIN NAVIGATION *********************** -->
<section class = "events">
<h1>We made the news!</h1>
<p>hover over the images to see us in action</p>
<div class="slidecontainer">
<figure class="slide visible-slide"> <img src="placeholder-images\slider1.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider2.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider3.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider4.jpg" alt=""> </figure>
<div class= slider-actions>
<button id="prev-btn"><</button>
<button id="next-btn">></button>
</div>
</div>
</section>
</main>
</body>
</html>
The error I am getting is that the Const Slide.ClassList is not defined
I have added a few images into HTMl.
I have added a "slide" ID to all the images. I have added a "visible-slide" ID for the slide I want to make visible
I have added display:none CSS property to the images I want to hide (#slide) and have included a display:block property to the "visibile-slide"ID
I am using JS to set visible-slide class to the image I want displayed
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I added an image carousel to my site and everything worked great until I tried to add a href tag around the img scr link. it pushes the image out of the slider I have put a link to what it looks like below. I did think it was some css pushing it out but after removing all the surrounding tags the image just stayed the same. I need this so i can add a lightbox to the image when clicked.
Link to image of slider
https://dl.dropboxusercontent.com/u/9833562/caratest.png
I couldn't get it to work on JSFiddle so here is a link to download my files
http://jonathanlowe.co.uk/ws/download/carousel_file.zip
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>TEST</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chgrid.css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
CSS
<style media="screen">
.containerslide {
width: 90%;
height: auto;
position: relative;
margin: 0 auto;
}
.roundabout-holder {
padding: 0px;
margin: 0 auto;
height: 310px;
width: 100%;
}
.roundabout-moveable-item {
height: 350px;
width: 380px;
cursor: pointer;
display:block;
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
#carousel-descriptions {
list-style:none;
display:block;
width:850px;
padding:0;
}
#carousel-descriptions li {
font-size:24px;
font-weight:bold;
text-align:center;
display:none;
}
#carousel-descriptions li.current {
display:block;
}
#carousel-controls2 {
max-width:920px;
margin:25px auto;
overflow:auto;
}
#carousel-controls2 span {
width:100px;
font-size:14px;
text-align:center;
margin:0 5px;
cursor:pointer;
background:#fff;
}
#carousel-controls {
width: 320px;
margin:25px auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
margin-top: -20px;
}
#carousel-controls span {
height: 13px;
width: 13px;
display:inline-block;
font-size:14px;
text-align:center;
margin:0 5px;
padding:1px;
cursor:pointer;
border:0.5px solid black;
background:#c6c6c6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 6px; /* for old Konqueror browsers */
}
#carousel-controls .current {
background:#000;
color:;
}
#carousel {
margin-bottom:-25px;
}
#carousel img{
padding: 30px;
}
#carousel img:hover {
padding:0px;
}
.prev-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.next-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
}
</style>
</head>
HTML
<body>
<div class="text-inter">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<section class="containerslide">
<div id="carousel">
<a href="#">
<img src="img/mactest.png" alt="" class="slide" style="" />
</a>
<img src="img/mactest.png" height="50px" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
</div>
</section>
<div id="carousel-controls2" >
<span><div class="prev-button" style=""><<</div></span>
<span><div class="next-button" style="">>></div></span>
<div id="carousel-controls" >
<span class="control current"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</div> <!-- col-md-12 End -->
JAVASCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
<!-- Roundabout Script Start -->
<script type="text/javascript">
(function($) {
var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
.roundabout({childSelector:"img",
minOpacity:1,
autoplay:false,
autoplayDuration:50000000,
btnNext: true,
btnPrev: true,
maxZ:380,
minZ:200,
maxScale: 0.99,
responsive:true,
clickToFocus: false,
autoplayPauseOnHover:true })
.on('focus', 'img', function() {
var slideNum = $carousel.roundabout("getChildInFocus");
$descriptions.add($controls).removeClass('current');
$($descriptions.get(slideNum)).addClass('current');
$($controls.get(slideNum)).addClass('current');
});
$controls.on('click dblclick', function() {
var slideNum = -1,
i = 0, len = $controls.length;
for (; i<len; i++) {
if (this === $controls.get(i)) {
slideNum = i;
break;
}
}
if (slideNum >= 0) {
$controls.removeClass('current');
$(this).addClass('current');
$carousel.roundabout('animateToChild', slideNum);
}
});
}(jQuery));
</script>
<script>
$('.next-button').on('click', function() {
$('#carousel').roundabout("animateToNextChild")
});
$('.prev-button').on('click', function() {
$('#carousel').roundabout("animateToPreviousChild")
});
</script> <!-- Roundabout Slider End -->
</body>
</html>
You could use data-attributes and set up your links with jQuery (to avoid having to edit your roundabout.js implementation. JSFiddle DEMO
<img src="http://lorempixel.com/200/200"
class="slide"
data-link="http://www.google.com" />
// this function should be in your page load function
$('.slide').click(function(){
window.open($(this).attr("data-link"), "_blank");
// you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});
// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
cursor: pointer;
}