jQuery disable hover effect onClick - javascript

http://codepen.io/jzhang172/pen/YXoWZa
$(function(){
$('.tint.first').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.one').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.tint.first:hover img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>
For clarity, please open my codepen and follow these instructions:
1.) Hover over the picture and observe the translate hover effect and the tint on the picture vanishing. (Working as intended)
2.) Click the picture and do not move the mouse after clicking it, observe how the picture grows into the frame
3.) Re-click the picture or simply refresh the page to go back to its normal size and now click the picture and take your mouse immediately off the picture to anywhere other then the picture.
4.) Observe how the picture automatically transitions into the position without the growing.
Question:
From what I can tell, this is because the ".tint.first:hover img" is still in effect and I'm guessing that if I could disable that when I click on the picture, it would be fine. How would I do this?
Also, if anyone could tell me how I could make the picture responsive, that'd be great. I'm concerned how position:relative, top, left etc. would look like on other windows.


I would recommend that you add the CSS in .tint.first:hover img to a class and add/remove the class according to your needs.
on hover you add it, on click you check if it is set on the element and remove it.
on mouseout you set it again on the element (for next time you wish it to grow).
Hope I was clear.
Regards,
Saar


http://codepen.io/jzhang172/pen/YXoWZa
Working answer. When mouse enters region, add css property, when mouse leaves region, remove that css property.
$(function(){
$('.tint.first').mouseenter(function() {
$(this).addClass("me img");
});
$('.tint.first').mouseleave(function() {
$(this).removeClass("me img");
});
$('.tint.first').on('click', function() {
$(this).removeClass("me img");
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.me img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>

Related

Issue with button on swappable gallery in mobile view

I am trying to add a button on the cards in my swipeable gallery, which is made using the Swiper API. However, when I remove the overlay on the cards to make the button visible, the slider starts to behave erratically and does not work properly. I am new to coding and apologize if this is a simple issue, but I would appreciate any help or suggestions.
To make the button functional, I need to remove the "content: ''" property from the ".gallery-cards" class in the CSS. However, when I do this, the slider starts to glitch in the mobile view. The ".gallery-cards" class is only used in the JS code to make the cards swipeable. I have included the CSS, JS, and HTML code below. Thank you for any assistance.
My JS Code
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
My CSS Code
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
My HTML Code
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

Photo slider glitches in mobile when button is added

I am using a swiper API to make a swipeable gallery. I am trying to add a button on the slider card however to do so I must remove an overlay on the card and when I do so the slider glitches and goes crazy. I'm a beginner in code so I apologize if it's a silly issue but I'd appreciate some assistance.
The way i make the button functional is by removing the content: '' from the .gallery-cards class. However when I remove it the slider glitches in the mobile view. the .gallery-cards is only present in the codes JS to make the card swipe. I have added the CSS, JS, and HTML below. Thanks for any suggestions or help
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>

First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>

Slide menu is not sliding

My code contains HTML, CSS and js file. Though I'm ok with CSS learning JS so I am getting stuck in it. The green color window in output seems to be slide but not happening so.
I am also using <script src="js/modernizr.custom.js"></script> to refer to the js page but it not happening so even if I have tried all these reloated stuff but i unable to refer from HTML even if it's not working on the same HTML page under TAG
$( "#toggle" ).click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* { font-family:courier; box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }
.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }
.menu.closed { left:-250px; }
#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }
.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>

Your CSS contains SCSS elements, like
#toggle {
...
#toggle:hover {
cursor: pointer;
}
...
}
There is no nesting in plain CSS. Convert these nested rules to normal CSS (and add jQuery to the snippet) to make it work.
In general, always make sure, that your markup, styles and javascript code doesn't have syntax errors. There are tons of tools for that.
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>

$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#wrapper { margin-left: 50px;}
#wrapper.closed{ left: 250px; margin-left: 0px; transition: all .3s; position: relative;}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh </div>

External custom prev next button fancybox

In my example when I click on thumbnails I open a fancybox gallery, to see prev and next photo I need to click on photos. How can I have the same effect with my "prev and next" link at left ?
At this time nothing happened when I click on them ?
HERE IS MY LINK
http://www.booclin.ovh/tom/254/
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallery").fancybox();
$("#launcherbook2").on("click", function(){
$("a.fancyboxgallery").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallery" ).on( "click", function(){
$.fancybox.close(); return false; });
});
*, *:after, *:before { padding: 0; margin: 0; -webkit-touch-callout: none;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:0; box-sizing: border-box }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
html, body { height: 100%; padding: 0; margin: 0; background-color: #fff;}
body, p, span, a, .links, .linkscredit { margin: 0 auto; font-size: 11px; line-height: 20px; text-decoration:none; font-family: "open_sansregular", sans-serif; letter-spacing: 1px; text-align:left; color: #282828; background-color: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index:9999; }
.spanbold { font-family: "open_sansbold"; }
.boldlinks, .menustyle2 { font-family: "open_sansbold"; cursor:pointer;}
a:hover { color: #d2c6af; }
img, object, embed { border: 0px; }
/* Second page */
.rightpart { position: fixed; left:0px; width: 100%; height: 100%; padding-left:200px; z-index: 0; overflow: auto;}
.leftpart { text-align:left; position: absolute; left:0; top:0; height:100%; padding: 80px 40px 10px 40px; overflow: hidden; z-index: 8021; }
.partmenu { z-index: 8021; }
.bottominfo { padding-left:0px; position:absolute; bottom:10px;
right:20px; z-index: 0; }
.secondleftpart { position:absolute; top:30px; left:10px; }
/* Second page */
#media only screen and (max-height: 500px) {
.bottominfo { display: none; }
.leftpart { height:auto; }
}
#page-tablegalerie { overflow:hidden; height: 100%; width: 100%; border-collapse: collapse; text-align: left; }
#page-tdgalerie { height: 100%; padding-left:0px; vertical-align: middle; }
div#globalgalerie { max-width: 100%; text-align: left; }
.fancyboxgallery, .socialopacity {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:1;
transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out;
font-size: 0px;
}
.fancyboxgallery:hover, .socialopacity:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
z-index:1;
}
.fancyboxthumbnailsgallery { margin: 12px 5px -10px 5px; }
div#juicebox-container{ height:900px; width:100%; overflow: hidden; }
.imglist { overflow: hidden; }
.imglist a { float: left; margin: 0px; }
.imglist a img {
vertical-align:bottom;
padding: 0px;
border: 0px solid #ccc;
max-width: 200px;
max-height: 133px;
float: left;
}
#page_holder {height: 100%;width: 100%;}
/* Slide */
#fancybox-loading,
#fancybox-lock,
.fancybox-wrap,
.fancybox-skin,
.fancybox-inner,
.fancybox-error,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-wrap embed,
a.fancybox-close,
a.fancybox-expand,
a.fancybox-nav,
a.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
background-color: transparent;
background-repeat: no-repeat;
background-image: none;
text-shadow: none;
}
#fancybox-lock {
background:#fff;
position: fixed;
top: 0;
left: 0px;
right: 0;
bottom: 0;
z-index: 8020;
overflow: hidden!important;
-webkit-transition : -webkit-transform 0.5s;
-webkit-transform : translateX(0px);
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
-webkit-transform: translate3d(0,0,0);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-skin {
border:0px;
background: #fff;
}
.fancybox-inner {
position: relative;
overflow: hidden!important;
-webkit-overflow-scrolling: touch;
width: auto!important;
height: auto!important;
padding: 0px 30px -10px 0px !important;
}
.fancybox-spacer {
position: absolute;
top: 100%;
left: 0;
width: 1px;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
zoom: 1;
}
a.fancybox-close {
position: fixed !important;
top: 80px;
left: 40px;
z-index: 99999 !important;
cursor: pointer;
background-position: 0 0;
}
a.fancybox-close:hover { color:#d2c6af; text-shadow: 0px 0px 0px #282828;}
a.fancybox-nav {
position: absolute;
top: 0;
width: 50%;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
overflow: hidden;
}
.fancybox-type-iframe a.fancybox-nav,
.fancybox-type-inline a.fancybox-nav,
.fancybox-type-html a.fancybox-nav
{
width: 70px;
}
a.fancybox-prev {
left: 0px;
}
a.fancybox-next {
right: 0px;
}
a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}
a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}
a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}
.fancybox-mobile a.fancybox-nav {
max-width: 80px;
}
.fancybox-desktop a.fancybox-nav {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-desktop a.fancybox-nav:hover {
opacity: 1; filter: alpha(opacity=100);
}
a.fancybox-expand {
position: absolute;
bottom: 0;
right: 0;
width: 46px;
height: 46px;
z-index: 8050;
opacity: 0; filter: alpha(opacity=0);
background-position: 0 -150px;
zoom: 1;
-webkit-transition: opacity .1s ease;
-moz-transition: opacity .1s ease;
-o-transition: opacity .1s ease;
transition: opacity .1s ease;
}
.fancybox-wrap:hover a.fancybox-expand {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-wrap a.fancybox-expand:hover {
opacity: 1; filter: alpha(opacity=100);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -35px;
width: 169px;
height: 71px;
padding:427px 348px;
background-color: #fff;
background-image: url(../images/loaderwhitescreen.gif);
background-position: center center;
opacity: 1; filter: alpha(opacity=100);
cursor: pointer;
z-index: 8060;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-tmp {
position: absolute !important;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-title {
text-align:left;
line-height: 15px;
position: relative;
text-shadow: none;
z-index: 8050;
display: block;
visibility: hidden;
}
.fancybox-title-float-wrap {
position: relative;
margin-top: 10px;
text-align: left;
zoom: 1;
left: -9999px;
}
.fancybox-title-float-wrap > div {
display: inline-block;
padding: 7px 20px;
font-weight: bold;
text-shadow: 0 1px 2px #222;
background: transparent; background: rgba(255, 255, 255, 1);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
text-shadow: 0 1px rgba(255, 255, 255, 1);
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
background: #fff; background: rgba(255, 255, 255, 1);
max-height: 50%;
overflow: auto;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 8010;
}
.fancybox-overlay-fixed {
position: fixed;
width: 100%;
height: 100%;
}
/* Default theme */
.fancybox-default-skin {
border-color: #fff;
background: #fff;
}
.fancybox-default-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-default-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
}
.fancybox-dark-skin {
background: #fff;
border-color: #fff;
border-radius: 0px;
box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset !important;
}
.fancybox-dark-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-light-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-light-overlay {
opacity: 1; filter: alpha(opacity=100);
background: #fff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(100%,#555555)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #999999 0%,#555555 100%); /* W3C */
}
<script src="http://www.booclin.ovh/tom/2/index/js/modernizr.custom.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/fancybox.js"></script>
<div class="leftpart">
<div class="secondleftpart">
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:;">PREV</a>
<a style="font-size: 7px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:;">NEXT</a>
<br/>
<a style="font-size: 7px;" title="Thumbnails" id="closegallery" class="showthumbnails" href="javascript:;">
THUMBNAILS
</a>
</div>
</div>
<div class="rightpart"><div id="globalgalerie">
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/3.jpg" class="highlightit" title="">
<img style="margin:12px 5px 5px 5px;" alt="" src="http://www.booclin.ovh/tom/254/index/projets/03.jpg"/>
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/2.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/02.jpg" />
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/1.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/01.jpg"/>
</a>
</div></div>

Currently, your "PREV" and "NEXT" links aren't doing anything (due to you setting their reference to href="javascript:;"). You need to change this to:
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>

Categories

Resources