Bottom image not sitting flush at bottom of page - javascript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SOS</title>
<link href="first.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script><script src="http://use.edgefonts.net/amatic-sc:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('images/slideshow1_over.jpg','images/slideshow2_over.jpg','images/slideshow3_over.jpg','images/news1_over.png','images/news2_over.png')">
<div id="container">
<div id="navbar">
<img src="images/logo.png" alt="" width="230" height="70" class="floatleft" id="logo"/>
<div id="menu">
<ul><li>HOME</li>
<li>ABOUT US</li>
<li>ABOUT ORANGUTANS</li>
<li>
OUR WORK
<ul>
<li>PROJECTS</li>
<li>CAMPAIGNS</li>
</ul>
</li>
<li>DONATE</li>
<li>CONTACT US</li>
<li>SHOP</li>
</ul>
</div>
</div>
<div class="slideshow">
<div><img src="images/slideshow1.jpg" alt="" width="1105" height="576" usemap="#Map" id="Image1"/>
<map name="Map">
<area shape="rect" coords="698,440,1070,544" href="#" onMouseOver="MM_swapImage('Image1','','images/slideshow1_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow2.jpg" alt="" width="1105" height="576" usemap="#Map2" id="Image2"/>
<map name="Map2">
<area shape="rect" coords="734,438,1058,542" href="#" onMouseOver="MM_swapImage('Image2','','images/slideshow2_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow3.jpg" alt="" width="1105" height="576" usemap="#Map3" id="Image3"/>
<map name="Map3">
<area shape="rect" coords="730,436,1058,544" href="#" onMouseOver="MM_swapImage('Image3','','images/slideshow3_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div class="news">
<div><img src="images/news1.png" alt="" width="638" height="322" usemap="#Map4" id="Image4"/>
<map name="Map4">
<area shape="rect" coords="440,262,612,286" href="http://www.takepart.com/article/2015/10/22/orangutans-are-dying-indonesia-burns" target="_blank" onMouseOver="MM_swapImage('Image4','','images/news1_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/news2.png" alt="" width="638" height="322" usemap="#Map5" id="Image5"/>
<map name="Map5">
<area shape="rect" coords="444,264,608,284" href="http://www.eco-business.com/news/palm-oil-expands-in-aceh/" target="_blank" onMouseOver="MM_swapImage('Image5','','images/news2_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div id="video">
<div id="iframe">
<iframe width="435" height="280" src="https://www.youtube.com/embed/SE_Gw9GzdZY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<img src="images/footer.png" width="1105" height="64" alt=""/></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</body>
<script type="text/javascript">
$('.slideshow').slick({autoplay:true,fade:false, dots:true, arrows:false});
$('.news').slick({autoplay:true,fade:true, dots:false, arrows:true});
</script>
</html>
#charset "UTF-8";
html {
margin:0px;
padding:0px;
}
body {
background-image:url(images/background3.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
margin:0px;
padding:0px;
}
#container {
width:1105px;
margin:0 auto;
}
#navbar {
background-color: rgba(0,0,0,0.70);
width:1105px;
height:100px;
}
ul {
po
display: inline;
list-style-type:none;
}
ul li {
font-weight: 400;
font-size: 27px;
display: inline-block;
margin-right: 0px;
position: relative;
padding: 19px 20px 27px 28px;
cursor: pointer;
font-family: amatic-sc;
font-style: normal;
color: #F2F2F2;
}
ul li:hover {
color: #fff;
text-shadow: 0px 0px 10px #13F909;
}
ul li:hover li{
text-shadow: none;
}
ul li ul {
position: absolute;
padding:0;
width: 150px;
top:80px;
left:0;
visibility: hidden;
}
ul li ul li {
background-color:rgba(0,0,0,0.70);
display: block;
color: #fff;
}
ul li ul li:hover { background-color:rgba(0,0,0,0.70); text-shadow: 0px 0px 10px #13F909; }
ul li:hover > ul {
visibility: visible;
}
ul.sub{
top:0;
left:154px;
visibility:hidden;
}
.floatleft{
float:left;
}
#logo {
margin-top:15px;
margin-left:20px;
}
#menu {
position:relative;
z-index:100;
padding-top:4px;
}
.slideshow {
padding-top:20px;
}
.news {
width:638px;
height:322px;
float:left;
}
#video {
background-color:rgba(0,0,0,0.70);
width:458px;
height:322px;
margin-left:647px;
position:absolute;
}
#iframe {
padding-top:21px;
padding-left:11.5px;
}
#footer {
bottom:50px;
}
Above is my code and essentially, my footer div includes an image that acts as my footer however, it is not sitting flush with the bottom of my page. I tried putting negative margin, padding and bottom and it did not move.
Here is an image to show the problem clearer, http://imgur.com/rk4DOuk

Everyone will ask you to use the footer with position:absolute; bottom:0px; and body with height:100%; margin:0px; so I'll suggest you a flex alternative to stick the footer on the bottom of the page without to set it to 'absolute':
body {
height: 100vh;
width:100%;
margin:0px;
}
#bigcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: plum;
}
#footer {
background: indigo;
width: 100%;
height: auto;
text-align: center;
-webkit-flex: 0 0 64px;
flex: 0 0 64px;
}
#picture {
vertical-align: bottom;
width: 100%;
height: 64px;
}
#content_container {
margin-left: 15px;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
<div id=bigcontainer>
<div id="content_container">
<h1>Sticky Footer</h1>
<p>text_A</p><p>text_B</p><p>text_C</p><p>text_D</p><p>text_E</p>
</div>
<div id="footer">
<img id="picture" src="http://i.imgur.com/T6Q4PMw.png" alt=""/>
</div>
</div>

Please add these style in css. Hope it will work.
html, body {
height: 100%;
}

Related

responsive image with mouse parallax

i have coded in, 3 layers of image with a mouse parallax effect, on full screen the image seems fine, but if i resize the window everything would crumble appart.
`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
<title>Document</title>
</head>
<body>
<section id="main">
<img src="canyon 3.png" class="layer" id="c3" value="5" />
<img src="canyon 2.png" class="layer" id="c2" value="10" />
<h1 class="text" >bla bla bla bla bla bla bla</h1>
<img src="canyon 1.png" class="layer" id="c1" value="20" />
</section>
<script src="js.js"></script>
</body>
</html>
section{
width: 100%;
height:100vh;
position: relative;
justify-content: center;
align-items: center;
display: flex;
}
section img{
position: absolute;
width:100%;
height:100%;
object-fit:cover;
}
#c1{
position: absolute;
width:140%;
height:max-content;
z-index:4;
}
#c2{
position: absolute;
left:100px;
width:100%;
height:max-content;
z-index: 2;
}
#c3{
position: absolute;
height:max-content;
z-index: 1;
}
`
i dont really know anything that i ca do to make it responsive.

fixing a mobile menu and logo as header for smaller screens

I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp

How to select 2 image at the same time in javascript?

Hi I'm trying to learn how to select image and I've done this so far. I just don't get how to select 2 image at the same time because I already tried removing .removeClass('selected'); in the images_list li function.
HTML:
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
CSS
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
JS: here's my JS where I'm having a problem with. I hope somebody can help me, Thanks!
$('.images_list li').click(function() {
$('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
you can see my fiddle here: http://jsfiddle.net/jasonc21/59swswz7/
Simply comment out the removeClass line entirely.
$('.images_list li').click(function() {
// Left the following in, in case later you want to make it single again.
// $('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>

Jssor Image Slider arrows not showing

I can't get the arrows on the image slider to appear... I've tried changing the positioning and display but that hasn't worked. Since putting the code on my Index page the only things I've changed are: removing "overflow:hidden" on the div id "jssor_1"; the actual size of the slider (width:500px;height:400px); and the rotation speed of each slide... The code was taken from the "no-jquery.html" file. As you can see on the "background: url" part of the code I've already set the source to the "a02.png".
I also noticed that the left arrow, whilst not visible on the slider, does still work (I can hover over it and click it).
I feel like I'm missing something simple here.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<!--site navbar-->
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<!--site logo-->
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<!--mainbody div-->
<div id="mainbody">
<div id="slider">
<script type="text/javascript" src="C:\Users\Cam\Desktop\NightfallGaming\js\jssor.slider.min.js" async></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
[{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
[{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
[{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
[{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
[{b:2000.0,d:600.0,rY:30.0}],
[{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
[{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 4000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('C:\Users\Cam\Desktop\NightfallGaming\img\a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative;
: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\001.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\003.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script>
jssor_1_slider_init();
</script>
</div>
</div>
</body>
</html>
Dont you have to put the two arrow span tages inside the main slider_container tag before your last closing div that wraps the image...

Resize image when pop up

I want to resize the image to bigger than the original size when the I click on the images. link http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview. This sample when click on image, it is pop up but the same the original size. How can I set it bigger.
Below the Code:
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
By assigning the desired size of images to the div .viewer like below .viewer img{width:600px} you are forcing images to resize to the to fit the size wanted. below the working snippet.
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
.viewer img{
width:600px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
I also suggest adding the following code so you can have it responsive on mobile for better surfing:
#media screen and (max-width: 600px) {
.viewer{
width:100%;
}
.viewer img{
width:100%;
}
}

Categories