admin管理员组文章数量:1435859
I'm trying to make an image onclick function with a fadein hidden div the problem is I don't really know jquery or javascript all that well. I have searched to try to do it in css but i heard it's buggy as hell and I don't understand enough of it js/jq to piece together what code i need and where it should go.
Basically what i want is this: you click on an image, the image fades in the hidden div, and preferably darkens the background (kind of like shadowbox would) then on the click of the close link within the hidden div, the div fades out and the background goes back to normal.
Right now I have the normal div with the image to be clicked, the hidden div, and the links set up.
I know it can be done, I'm just having a hell of a time figuring it out. Please help?
::UPDATED CODE TO REFLECT JS CHANGES::
HTML-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Goes Here</title>
<meta name="keywords" content=" Enter Metatags" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();
</script></head>
<body bgcolor="#547FA1">
<div id="content">
<div id="wrapper">
<div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
</img></div>
<div class="shadowdisc">
<p> </p>
<font size=4 color=#999><p align=center>Content for Hidden Div.</p>
<p align=center>Here is more content</p>
<br /><br />
<p align=center>Finishing the content here</p>
<p>
<p>
<p align=center><a href="wele.html">ENTER</a> <a href="">EXIT</a></p>
<p>
<p>
<p align=right><a href="#">Close</a>
</font>
</div>
</div>
</div>
</div>
</body
</html>
CSS-
#content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
}
#wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
}
#holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
}
.shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
}
</style>
Javascript
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script>
$(function () { // Onload
$("#showImage").click(function () {
$("#shadowdisc").fadeIn(1000);
});
$("#closeLink").click(function () {
$("#shadowdisc").fadeOut(1000);
});
});
</script>
I'm trying to make an image onclick function with a fadein hidden div the problem is I don't really know jquery or javascript all that well. I have searched to try to do it in css but i heard it's buggy as hell and I don't understand enough of it js/jq to piece together what code i need and where it should go.
Basically what i want is this: you click on an image, the image fades in the hidden div, and preferably darkens the background (kind of like shadowbox would) then on the click of the close link within the hidden div, the div fades out and the background goes back to normal.
Right now I have the normal div with the image to be clicked, the hidden div, and the links set up.
I know it can be done, I'm just having a hell of a time figuring it out. Please help?
::UPDATED CODE TO REFLECT JS CHANGES::
HTML-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Goes Here</title>
<meta name="keywords" content=" Enter Metatags" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();
</script></head>
<body bgcolor="#547FA1">
<div id="content">
<div id="wrapper">
<div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
</img></div>
<div class="shadowdisc">
<p> </p>
<font size=4 color=#999><p align=center>Content for Hidden Div.</p>
<p align=center>Here is more content</p>
<br /><br />
<p align=center>Finishing the content here</p>
<p>
<p>
<p align=center><a href="wele.html">ENTER</a> <a href="http://www.google.">EXIT</a></p>
<p>
<p>
<p align=right><a href="#">Close</a>
</font>
</div>
</div>
</div>
</div>
</body
</html>
CSS-
#content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
}
#wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
}
#holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
}
.shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
}
</style>
Javascript
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script>
$(function () { // Onload
$("#showImage").click(function () {
$("#shadowdisc").fadeIn(1000);
});
$("#closeLink").click(function () {
$("#shadowdisc").fadeOut(1000);
});
});
</script>
- 1 Post what you've done so far – Michael Robinson Commented Jan 28, 2013 at 21:29
- Instead of reinventing the wheel, why don't you use an existing jQuery plugin like colorbox? – hohner Commented Jan 28, 2013 at 21:29
- Does colorbox do hidden divs? My understanding was that most/all of the /box plugins did images/media only. – Chickpea Commented Jan 28, 2013 at 21:32
- The jQuery documentation has examples you can almost directly copy and paste for what you want to do: api.jquery./fadeIn Scroll down and look at the demos. – Adrien Delessert Commented Jan 28, 2013 at 21:48
- Adrien- I've seen countless examples, and I still don't understand how to apply it to my situation. I'm obviously totally clueless when it es to the functions and how they work. It's like...I know which ones I'm supposed to use, but I don't know where they go/ what order/ or in relation to my site. – Chickpea Commented Jan 28, 2013 at 22:00
2 Answers
Reset to default 2Here is an example how to do it with JQuery and a little bit of CSS.
HTML
<button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
<p>I'm a hidden div</p>
<button id="closeButton">close me</button>
</div>
CSS
.hidden {
display: none;
opactiy: 0;
}
JavaScript
<script>
$(function () { // Onload
$("#showButton").click(function () {
$("#hiddenPanel").fadeIn(1000);
});
$("#closeButton").click(function () {
$("#hiddenPanel").fadeOut(1000);
});
});
</script>
jsBin demo
<div id="lightbox"></div>
<img class="thumb" src="img1.jpg" alt="" />
<img class="thumb" src="img2.jpg" alt="" />
CSS:
*{margin:0;padding:0;}
h2, p{padding:30px;}
#lightbox{
position:fixed;
top:0px;
left;0px;
background:rgba(0,0,0,0.6);
width:100%;
height:100%;
text-align:center;
cursor:pointer;
display:none;
}
#lightbox > img{
position:relative;
height:400px;
top:50%;
margin:-200px auto;
display:inline;
box-shadow:0 3px 25px #000, 0 0 0 5px rgba(255,255,255,0.4);
width:auto;
}
.thumb{
float:left;
padding:10px;
width:180px;
cursor:pointer;
}
jQ:
$('.thumb').click(function(){
var src = $(this).attr('src');
$('#lightbox').append( '<img src="'+src+'"/>' ).fadeTo(800,1);
});
$('#lightbox').click(function(){
$(this).fadeTo(800,0, function(){
$(this).empty().hide();
});
});
本文标签： jquery or javascript image onclick div fadein link onlcick div fadeoutStack Overflow
版权声明：本文标题：jquery or javascript image onclick div fadein link onlcick div fadeout - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745626572a2667009.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论