I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
Related
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 am using a custom script from the https://cornel.bopp-art.com/lightcase/ website. I have implemented correctly in my website, the problem is that i am trying to have a button under an image. Right now there is an "alt" with a text. How to insert a button on there? I have tried many things but non of them are working. Here is an image that shows how it looks, what i am trying to do is set up a button where it says "cool down"
<div class="col-md-4 col-sm-6 fashion photography " >
<a href="img/tshirt.jpg" data-rel="lightcase"class="portfolio_item" >
<img src="img/men.jpeg" alt="this t-shirt is awesome" class="img-responsive">
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>Men Tennis Style </span> <em>Fashion</em>
</div>
</div>
</div>
</a>
</div>
You can use this for positioning the button over the image.
<!DOCTYPE html>
<html>
<head>
<title>prasad</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.photography {
position: relative;
width: 100%;
max-width: 400px;
}
.photography img {
width: 100%;
height: auto;
}
.photography .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #884992;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.photography .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="col-md-4 col-sm-6 fashion photography container">
<a href="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" data-rel="lightcase"class="portfolio_item" >
<img src="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" alt="this t-shirt is awesome" class="img-responsive">
<button class="btn">Cool down</button>
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"><span>Men Tennis Style </span> <em>Fashion</em></div>
</div>
</div>
</a>
</div>
</body>
</html>
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.
I want to create a simple slideshow with JavaScript. I found this link Page
and I want the last slideshow. The slideshow with the header 'scrollRight (click)'. But it doesn't work on my page. The problem is when I press sometimes on the picture, then its away. Here is my page
MyPage and here the code:
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 20px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
}
article{
width: 100%;
background-color: red;
overflow: hidden;
}
.one{
height: 200px;
width: 200px;
float: left;
}
.two{
float: right;
width: 860px;
word-wrap: break-word;
background-color: blue;
height: 200px;
}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0,
easing: 'easeInOutBack'
});
});
</script>
</head>
<body>
<section>
<article>
<div class="one">
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
</div>
<div class="two">
<h1>Ansteckbutton</h1>
<br>
<p>
Groesse: 30cm Durchmesser
<br>
Farbe: Rot
<br>
Material: Metall
<br>
Form: Rund
</p>
</div>
</article>
<br>
<hr>
<br>
<article>
<div class="one">
</div>
<div class="two">
exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexample
</div>
</article>
</section>
</body>
</html>
<!-- article mehrfach verwenden
Working Fiddle
There is something wrong with the parameters you are providing.
Just try this;
$(document).ready(function() {
$('.one').cycle();
});
Without parameters working fine.
Updated Working Fiddle
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0
});
});
Issue:
It was issue with applying easing: 'easeInOutBack' and it was throwing below error on the console. Removing attribute fixed the issue.
TypeError: d.easing[(intermediate value)] is not a function
For further investigation of this issue check this stackoverflow answer.
I'm making a page that has javascript bubble links and I want a slideshow on it. It seemed to work fine, but then after making a couple other pages with slideshows, they all broke. I'm not sure why because they all have different names with different javascripts and they're all in the right place. I'm going to paste all the code I have for one page. I have a folder named jewelry that has the pictures and the javascript, however the html page is in the main folder, but I have it labeled as such. Is there something that I'm missing or need to take away? I'd like to note that the javascript got is pretyy much completely from a javascript book ( I just changed the file locations and the captions) so that should be pretty good. It's mostly the html. I want my navigation to work with my slideshow. It'll show the first image, but then the buttons won't go to the next slide.
If you have any suggestions for easier coding, go ahead. Otherwise, I'd just like to get this fixed. My final project is due in a couple days and idk how to fix this! I don't have it all uploaded to an actual link so you'll have to work with the snippets I gave you - which is literally my whole entire page and all my javascript.
Thanks in advance.
window.onload = initAll;
var currImg = 0;
var captionText = [
"Mostly bracelets right now",
];
function initAll() {
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = function() {
newSlide(-1);
}
document.getElementById("nextLink").onclick = function() {
newSlide(1);
}
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow1").src = "jewelry/bracelet" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="jewelry/jewelry.js"></script>
<style>
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 450px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
height:45px;
width:100%;
background-color:#EAC5E4;
position:relative;
bottom:-0;
font-style: italic;
}
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="content">
<div class="title"> </div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div id="horizon">
<div id="stuff">
<h2> Jewelry Gallery </h2><br>
<img src="jewelry/bracelet0.jpg" alt="My Jewelry" id="slideshow1"></img>
<div id="imgText"> </div>
<div id="chgImg">
<input type="button" id="prevLink" value="« Previous">
<input type="button" id="nextLink" value="Next »">
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<a href="http://kiya-rose.deviantart.com/">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="https://www.facebook.com/thinkjewelryy">
<img height="32" width="32" alt=" Think Jewelry Page" src="facebook.png">
</a>
Copyright© Brittany Rose
</footer>
</body>
</html>
Why "CaptionText" array has just one single item in it? In this case your slide index always will be "0".
var captionText = [
"Mostly bracelets right now",
];