I've built a lightbox for some photos and I have a row of thumbnails at the bottom so that you can easily jump to any picture instead of the ones directly before or after the current image.
I used to use WordPress and in one of the lightbox plugins, there was a feature where, if you had more images than the width of the page could show, they would go off of the page, but when you used the arrows to go to one of the images that were off the page the line of thumbnails would automatically slide over so that the current image's thumbnail was on screen.
Some of my code is below to give you a sense of what I'm working with.
HTML:
There's obviously a lot more since 3 images wouldn't run off the page, but this is for the general idea. The rest is more of the same.
<div class="row">
<!-- Images on the page itself -->
<div class="column">
<img src="image-1.png" style="width:100%" onclick="openModal();currentSlide(1)" class="photo-1">
</div>
<div class="column">
<img src="image-2" style="width:100%" onclick="openModal();currentSlide(2)" class="photo-2">
</div>
<div class="column">
<img src="image-3" style="width:100%" onclick="openModal();currentSlide(3)" class="photo-3">
</div>
<!-- Images in the lightbox -->
<div id="myModal" class="modal-container">
<div class="modal">
<span class="close cursor" id="handle" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="image-1" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="image-2" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="image-3" style="width:100%">
</div>
</div>
</div>
<!-- Arrows -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnails in the lightbox-->
<div class="column-inside-row">
<div class="column-inside">
<img class="demo cursor" src="image-1" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column-inside">
<img class="demo cursor" src="image-2.png" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column-inside">
<img class="demo cursor" src="image-3.png" style="width:100%" onclick="currentSlide(3)">
</div>
</div>
</div>
</div>
CSS:
There's obviously a lot more, but the only thing relevant here is what I have for the thumbnails. Otherwise, it's a classic lightbox setup.
.column-inside-row {
position: absolute;
bottom: 0;
display: flex;
width: 100%;
justify-content: center;
flex-wrap: nowrap;
z-index: 11;
}
.column-inside {
margin: 0px 2px;
}
.demo:hover {
transform: scale(105%);
transition: .3s ease-out;
}
The only JS I have right now is for things like openModal and closeModal, which are just classic lightbox toggles. Those are irrelevant here.
Let me know if there's more that I can include. I know there's no JS to work with but I don't know where to start. Thanks in advance.
Related
Can anyone help me in achieving the following carousel (train carousel) effect using grid and cards in MaterializeCSS. I have tried many solutions, but I'm unable to achieve desired results.
Here is what I have achieved so far: https://jsfiddle.net/c5mq2ezo/1/ (sorry for the images inside the link)
But the problem is I need to create train carousel effect with any number of grids/cards available. Right now it gives unexpected results in visible slide. If I add 4 or 5 cards, it only displays 3 instead of 4. If I add 7 or 8 cards then it displays 4 cards as it should.
Following is the code:
<body class="grey darken-3">
<section>
<div class="carousel carousel-slider">
<a class="carousel-item black-text" href="#one">
<div class="card">
<div class="card-image">
<img src="images/samples/insurance.png">
</div>
<div class="card-content">
<h6>Insurance</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#two">
<div class="card">
<div class="card-image">
<img src="images/samples/manufucturing.png">
</div>
<div class="card-content">
<h6>Manufucturing defects</h6>
<p>Production lines are often equipped with cameras, but it can be challenging to infer quality or safety problems...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Retail</h6>
<p>Recommend products that match your customers' style, analyze reviews or survey data for topics and trends</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Content filtering</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent future ...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Card 5</h6>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</a>
</div>
</section>
</body>
CSS:
.carousel .carousel-item {
width: 340px !important;
padding: 20px;
}
.card{
border-radius: 8px;
position: relative !important;
right: 20px !important;
}
Actually you can add the cards to the carousel adding the class carousel-item to the card and not using the a tag:
<div class="carousel ">
<div class="card carousel-item">
<div class="card-content">
<span class="card-title">Card 1</span>
Card 1 content
</div>
</div>
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
View in browser
The issue is when you add the picture because the pic uses all the space and the content is displayed below the carousel, maybe with some styles it could be fixed, I don't know too much about CSS.
Hope this be helpful.
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..
Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;
I want 3 thumbnails with equal height. If I first load the site the thumbnails are too small for the pictures and the text is behind the next row of thumbnails. The buttons are in the picture, if I reload the site they are all on same height and aligned.
why?
HTML:
<div class="row equalheight">
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<script src="../../style/js/jQuery.equalheights.min.js"></script>
<script>
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
</script>
CSS:
.button {
position: absolute;
bottom: 15px;
right: 30px;
}
.artikel {
margin-bottom: 25px;
}
Put your height equalizer code into $(window).load() or $(document).ready() block.
Loading of images lags from the rest of the html. Your equalizer starts working before the images have fully loaded.
$(window).load(function(){
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
});
or
$(document).ready(function(){
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
});
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam