So I am trying to learn how to setup a masonry image gallery. I am having lots of trouble achieving this. The gallery comes from desandro
Here is what I have for HTML, CSS, JS
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
/** Masonry Photo Gallery **/
.grid {
background: #EEE;
max-width: 1200px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 160px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 1px;
}
.grid-item2 { width: 320px; }
.grid-item3 { width: 480px; }
.grid-item4 { width: 640px; }
.grid-item5 { height: 200px; }
.grid-item6 { height: 260px; }
<html>
<head>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | Developer | 3D Modeler</title>
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/ebaac7d7fd.js"></script>
<script src="https://npmcdn.com/masonry-layout#4.1/dist/masonry.pkgd.min.js"></script>
<!-- <script src="/website/js/masonry.pkgd.min.js"></script>-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Gallery -->
<div class="grid" data-masonry= "{ "itemSelector": ".grid-item", "columnWidth": 160 }"></div>
<div class="grid-item">
<img src="img/chalkboard.jpg" alt="chalkboard"/>
</div>
<div class="grid-item2">
<img src="img/computer.jpg" alt="computer"/>
</div>
<div class="grid-item3">
<img src="img/girlincar.jpg" alt="girlincar"/>
</div>
<div class="grid-item4">
<img src="img/guitar.jpg" alt="guitar"/>
</div>
<div class="grid-item5">
<img src="img/working.jpg" alt="working"/>
</div>
<div class="grid-item6">
<img src="img/woman-camera.jpg" alt="woman-camera"/>
</div>
</body>
</html>
I think I am not doing something correct on the javascript part. Also, I want this gallery to be responsive.Any help is appreciated.
Related
I'm trying to make analog of with images and videos using slick carousel in vue (nuxt). It works fine when images are the same width, but when width is different - speed seems to be unpredictable.
How to make sliders with different width go one after another with the same speed and no stop?
This is my example:
$(document).ready(function(){
$('.slider').slick({
slidesToShow: 3,
variableWidth: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 0,
speed: 1000
});
});
.wrapper {
border: 1px solid blue;
overflow: hidden;
}
.slider {
border: 1px solid red;
box-sizing: border-box;
}
.item {
box-sizing: border-box;
border: 1px solid red;
}
.item_300 {
width: 300px;
}
.item_500 {
width: 500px;
}
.item_600 {
width: 600px;
}
.item_200 {
width: 200px;
}
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
</head>
<section class="wrapper">
<div class="slider">
<div class="item item_300"><h3>1</h3></div>
<div class="item item_500"><h3>2</h3></div>
<div class="item item_300"><h3>3</h3></div>
<div class="item item_500"><h3>4</h3></div>
<div class="item item_300"><h3>5</h3></div>
<div class="item item_200"><h3>6</h3></div>
</div>
</section>
<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="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>
I'm practicing customizing bxSlider direction buttons.
As you can see, I changed .bx-controls-direction a's width & height to put different background images.
prev button works well, but next button seems weird. When I hover on it, it appears two different size same icons. How can I fix this?
the image is here: https://i.postimg.cc/5NdXKznk/2.png
HTML/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bxSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>my beautiful moments</h1>
<div class="slider">
<div class="slide"><img src="./img/a.jpg" alt=""></div>
<div class="slide"><img src="./img/b.jpg" alt=""></div>
<div class="slide"><img src="./img/c.jpg" alt=""></div>
<div class="slide"><img src="./img/d.jpg" alt=""></div>
<div class="slide"><img src="./img/e.jpg" alt=""></div>
<div class="slide"><img src="./img/f.jpg" alt=""></div>
</div>
<script>
$(document).ready(function() {
$('.slider').bxSlider({
mode: 'fade',
slideWidth: 500,
auto: true,
pause: 1800
});
});
</script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
}
.bx-wrapper {
box-shadow: none;
border: none;
margin: 1rem auto;
}
.bx-wrapper .bx-controls-direction a {
width: 90px;
height: 90px;
}
.bx-wrapper .bx-prev {
left: -10rem;
background: url('../img/arrow_t3_prev.png');
}
.bx-wrapper .bx-next {
background: url('../img/arrow_t3_next.png');
right: -10rem;
}
I figured it out myself.
I had to specify classes more in css.
CSS:
.bx-wrapper .bx-controls-direction .bx-prev {
background: url('../img/arrow_t3_prev.png') no-repeat;
left: -10rem;
}
.bx-wrapper .bx-controls-direction .bx-next {
background: url('../img/arrow_t3_next.png') no-repeat;
right: -10rem;
}
Now it works perfectly.
I need your help with creating jquery photo gallery. I need to make this page responsive. I need to add next and previous buttons. I also need to add stop and resume buttons. But most important, I need to make it responsive.
Thanks for any feedback.
Thank you very much.
My code by far is below.
$(".thumb").click(function () {
$("#large img").attr("src", $(this).children("img").attr("src"));
$(".active").removeClass("active");
$(this).addClass("active");
});
setInterval(function () {
var $dalsi = $(".active").next();
if($dalsi.length == 1) {
$dalsi.click();
}
else {
$("#thumbnails .thumb:first-child").click();
}
}, 1000);
main {
max-width: 1024px;
margin: 0 auto;
}
#large {
width: 100%;
height: 400px;
overflow: hidden;
}
#thumbnails {
width: 100%;
}
#large img {
height: 100%;
display: block;
margin: 0 auto;
}
.thumb {
height: 200px;
width: 24%;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.thumb img {
height: 100%;
width: auto;
margin: 0 auto;
}
.thumb.active {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="large">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div id="thumbnails">
<div class="thumb active">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div class="thumb">
<img src="http://wiki.rvp.cz/#api/deki/files/12941/=brambora_hliza.jpg">
</div>
<div class="thumb">
<img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
</div>
<div class="thumb">
<img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
</div>
</div>
</main>
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Thanks for help.
MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>
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;
}