I want to create a gallery of multiple images, from a single "preview". I'll explain better. Let's say I have 3 different images which are 3 different products. By clicking on each of these, I would like to open a gallery (different for each preview) of x images for each single product.
I tried to create it using LIGHTBOX by Lokesh Dhakar, but I can only have one image for each single preview and the gallery is only one.
I have tried several attempts, but I can't get any better
Here is my code, hope someone has some ideas
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js">
</script>
</head>
<body>
<h1> Image Gallery Design</h1>
<div class="gallery">
<img src="PREVIEW1.png">
<img src="PREVIEW2.png">
<img src="PREVIEW3.png">
</div>
</body>
</html>
body{
font-family: sans-serif;
}
h1{
text-align: ceter;
color: forestgreen;
margin: 30px 0 50px;
}
.gallery img{
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover{
filter: grayscale(0);
transform: scale(1.1);
}
Hide the other <a> elements of the same set using a CSS Utility class like u-none that does display: none;
Use <img> only for the first set thumbnail
lightbox.option({
resizeDuration: 200,
wrapAround: true
});
.u-none {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet" type="text/css" />
<a href="https://placehold.it/500x500/f0b&text=A1" data-lightbox="set_1">
<img src="https://placehold.it/100x100/f0b&text=A1">
</a>
<a href="https://placehold.it/500x500/f0b&text=B1" data-lightbox="set_2">
<img src="https://placehold.it/100x100/0bf&text=B1">
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
or wrap all the hidden set images inside a common parent <div> with that u-none class .
Related
I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
I'm trying change the image placed inside the phone mock up frame. The problem is that images don't change in that specific location even tough I have the code for it. Can anyone help out?
<!DOCTYPE html>
<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.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Mobile plugin</title>
<!-- Bootstrap -->
<script src="script.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper" class="container">
<div class="row-fluid">
<div class="nexus">
<div class="col-xs-3 col-sm-5 col-md-4">
<img src="images/nexus.png">
<div class="image">
<div id="im">
<img src="images/2a.png" id="image2">
<img src="images/3.png" id="image3">
<img src="images/4.png" id="image4">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="logofix">
<div class="clearfix">
<img class="logo" src="images/logo.png" width="160px">
<ul class="image-switch">
<li data-feature="feature-1">
<h4>Connect</h4>
<p>Connect the plugin using various methods.</p>
</li>
<li data-feature="feature-2">
<h4>Time spend connected</h4>
<p>This will allow you to monitor how long</p>
<p>have been connected each day and</p>
<p>how much data have you transferred.</p>
</li>
<li data-feature="feature-3">
<h4>Browsing Habits</h4>
<p>Shows you what percentage of your time</p>
<p> is spent on different tasks and the amount </p>
<p> of daily visits.</p>
</li>
<li data-feature="feature-4">
<h4>Dashboard</h4>
<p>The dashboard gives a nice and simple</p>
<p> preview of the product functionalities,</p>
<p> allowing you to navigate easily.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here is the CSS file which sets the location of both the phone frame and the actual images :
.logofix {
right: 60 % ;
position: static;
top: 30 % ;
display: block;
}
#
wrapper {
position: relative;
margin - right: auto;
margin - left: auto;
padding - top: 72 px;
}#
wrapper, .wrapper {
min - height: 100 % ;
height: auto!important;
box - sizing: border - box;
}
li: hover {
padding - left: 10 px;
transition: all 0.2 s ease - out 0 s;
}
/* Settings and properties of the list text block*/
li {
list - style - type: none;
font - family: Open Sans;
font - size: 16 px;
margin: 0 px;
float: left;
cursor: pointer;
display: block;
width: 100 % ;
padding: 5 px 0 px;
position: relative;
transition: all 0.2 s ease - out 0 s;
}
/*END of Settings and properties of the list text block*/
#
image2 {
height: 390 px;
width: 212 px;
position: absolute;
top: 42 px;
left: 23 px;
z - index: 1;
}
I am using this simple short javascript to change the images on hover but I'm not sure if the problem is not from it as well:
$(document).ready(function() {
$('ul.image-switch li').mouseover(function(e) {
if(e.target.nodeName.toLowerCase() == 'a') return;
var image_src = $('a', this).data('image');
var img = $('.image-container img');
if(img.attr('src') != image_src) { // only do the fade if other image is selected
img.fadeOut('slow', function() { // fadeout the current image
img.attr('src', image_src).fadeIn(); // load and fadein new image
});
}
});
});
This image show how the website looks and where should the images change when someone hovers with their mouse on the text on the right
I don't think you need Js in this specific case why not just doing something like :
.thingToHover ~ .imageToShow
{
display : block;
}
Of course you'll need your images to be previously set as display:none.
If you want the fade in / fade out effect just add transition : 0.5s to the class of your images.
Here is an exemple in a JsFiddle
So this could be a possibly very simple problem but I'm having a mind block at the moment. I'm trying to integrate this code with my website, but due to the image being a background layer I can't have it appear above other elements on the page.
So is there a way to code the background-image within the HTML instead of CSS so it can be given a z-index property so it stacks on-top of other elements?
The code is as follows below in it's simplest form
(Left out something, should work now).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="home%20css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>
<script type="text/javascript">
$(function() {
$(".button0").flex();
});
</script>
<style type="text/css">
.button0 {
position:relative;
width:850px;
min-height:300px;
}
.button0 a {
width:100px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center;
}
[bb=a] {background-image: url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);
position: absolute;
z-index: 100;
}
/* [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;} */
</style>
<body>
<div class="button0">
<a bb="a" style="left:0px;top:0px;width:10%;height:140px;" width="145%" height="140"></a>
<!--<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a> -->
</div>
</body>
First, set your background using the body background tag:
<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd>
Then, use a script to set the z-index:
<script>
function changeStackOrder()
{
document.getElementById("bkgrnd").style.zIndex="1";
}
</script>
I am new to html, I am simply trying to add a caption on top or below each image in the code below; inputs welcome. It seems that an additional option is needed on the line where pictures are included; i have tried alt="my image description", it adds and info link "i" on the page, but I would need to place it above or below the image.
<head>
<title> identity </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
<link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/>
<script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name">
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE>
<div class="body3">
<div id="galleria">
<img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
<img src="../images/lafete2.jpg">
<img src="../images/lafete3.jpg">
</div>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"> about</p>
<p align="right"> contact</p>
</body>
</head>
From galleria's doc's:
Captions & meta data
If you want to extract meta data from the HTML source such as title & description, you can provide this as attributes:
<img src="image.jpg"
data-title="My title"
data-description="My <strong>description</strong>"
data-link="http://my.destination.com"
>
Side-note: In HTML5 one can now (by specification) add custom attributes to elements (in the HTML markup) but they must be prefixed with data-. That is what later versions of galleria now use.
Hope this helps!
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.