Could you please tell me how to show big or large image on button click with overlay. I am making a image slider in which user click on image and it shows the full image with overlay. I tried like this
https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:black;
z-index:9999;
color:white;
}
$(function() {
var counter = 0;
$('#next').click(function() {
if (counter < $('.imageBlock').length-1) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('.imageBlock').click(function(){
$('body html').addClass('overlay')
})
})
Here's an example where clicking the image - we take the src, and add it to a hidden div (.overlay img) and then show the div.
clicking the overlay hides it again.
Hope this is helpful
$('.thumb').on('click', function(){
$('.overlay img').attr('src', $(this).attr('src'));
$('.overlay').show();
});
$('.overlay').on('click', function(){
$('.overlay').hide();
});
.thumb {
width: 250px;
}
.overlay {
display: none;
position: absolute;
top:0px;
background: #000;
width: 100%;
height: 100vh;
white-space: nowrap;
text-align: center;
}
.overlay img {
width: 100%;
border:5px solid #000;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=">
<div class="overlay"><span class="helper"></span><img src=""></div>
Here's a fiddle: https://jsfiddle.net/BradChelly/kbode1cx/
For starters $('body html').addClass('overlay') doesn't work, because that selects an html element inside a body element.. which doesn't exist.
I think you meant to target either class (to make it cross-browser):
$('body,html')
You could toggle the class:
$('body,html').toggleClass('overlay')
Then adjust your css. Probably something like this:
.overlay .imageBlock .small img {
display: none;
}
.overlay .imageBlock .large img {
display: block;
}
BTW, if you only need the .small and .large wrappers with img just for the overlay feature, then you're making things harder than needed...
If you want to use a library, you can use prettyPhoto that does everything you need.
If you don't want to use a library, you can do that in your code (last jQuery event of your JS file) :
$('.imageBlock').click(function(){
$('body').toggleClass('overlay');
$('.imageBlock').eq(counter).find('.large img').toggle();
})
Related
I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.
The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.
This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.
https://jsfiddle.net/k6ey1duc/36/
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.text {
display: inline;
}
.pop-up {
display: none;
background-color: #fe0c0d;
}
#show-hide {
display: block;
margin: auto;
}
<body>
<script>
$(document).ready(function() {
var x = false;
$('#show-hide').on('click', function() {
if (!x) {
$("#pop-up").css({
"backgroundColor": "#fe0c0d",
"display": "inline"
});
x = true;
} else {
$("#pop-up").hide();
x = false;
}
});
});
</script>
<div class='container'>
<p class='text'>
Hello there! <span>Here is a span.</span>
</p>
<div id='pop-up' class='pop-up'>
Here is a pop-up
</div>
<button id='show-hide'>
Click for pop up
</button>
</div>
</body>
Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.
Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.
.container {
position: relative;
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.pop-up {
position: absolute;
display: none;
background-color: #fe0c0d;
}
Use position:relative and postion:absolute.
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px;
position: relative;
}
.pop-up {
display: none;
background-color: #fe0c0d;
position: absolute;
left:100%;
width:inherit;
}
How can I make the outside div always underneath the current item div. the code works fine but if it has two lines, like the image below.
The outside div would be on the top if I click box6 or box7. If there is a way I could make outside div change the position dynamically?
<div class="container">
<div class="item" data-content="1">1
</div>
<div class="item" data-content="2">2
</div>
<div class="item" data-content="3">3
</div>
<div class="outside">
</div>
</div>
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
Sample online http://jsfiddle.net/nm3Y4/
Thanks a lot for the answers and your time. I think I didn't make it clear, so what I wanted to achieve is that, if you click box1, should looks like the image below
and when click on box6 or box7 should show like below
so which means that outside below current item div
Thanks again
You could change the value of top property of the absolutely positioned .outside element according to the height of the .item box and the top offset of the current clicked item:
$('.item').click(function(event) {
var $this = $(this);
var contentNumber = $this.data("content");
$('.active').removeClass('active');
$this.addClass("active");
$('.content').hide();
$('.content'+contentNumber).show();
$('.outside')
.css('top', $(this).offset().top + $(this).height() + 'px')
.slideDown();
});
UPDATED DEMO.
As a side-note: It's better to position the .outside element relative to the .container rather than the initial containing block.
.container {
/* Create a containing block for the absolutely positioned elements */
position: relative;
}
Also float: left; declaration is redundant for the .outside as it's positioned absolutely.
As per your update, you could relative positioning and add top property in order to position the items (which their top offset is higher than the current clicked item) when the click event is triggered:
.item {
/* other styles here... */
float:left;
position: relative; /* Position the items relatively */
}
$('.item').click(function(event) {
var $this = $(this);
// ...
$('.item').filter(function() {
return $(this).offset().top > $this.offset().top;
}).css('top', $('.outside').height() + 'px');
// ...
});
Then reset their position when the .outside is closed:
$('.close').click(function(){
$('.item').css('top', '0'); // reset the top property/value
$('.outside').slideUp();
$('.active').removeClass('active');
});
UPDATED DEMO.
remove position:absolute and top:80px and add clear:both;
.outside {
background:yellow;
background: #222222;
clear:both;
display: none;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
DEMO
since question is updated, this answer doesnt fit the need,
i leave it here just because it shows behavior of absolute element if no coordonates are given ...
you could reset white-space and not float the divs to keep them on 1 line.
http://jsfiddle.net/nm3Y4/7/
.slider {
margin: 10px 0;
width: 580px;
height: 250px;
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
.item {
width: 60px;
height: 60px;
display:inline-block;
background:red;
margin:10px;
cursor: pointer;
}
.content {
display:none;
}
.active {
background:blue;
}
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
.close {
float:right;
cursor: pointer;
margin-right:10px;
}
.container {
white-space:nowrap;
}
.outside {
white-space:normal;
}
or do not let your box float, inline-block is just fine, and remove the top coordonates, see : http://jsfiddle.net/nm3Y4/9/
<div id="main">
<div>TITLE</div>
<div>BODY</div>
<div>COMMENT</div>
<div><textarea></textarea></div>
</div>
<button>overlay</button>
#main {
width: 200px;
height: 200px;
background-color: yellow;
}
live: http://jsfiddle.net/9DLyE/1/
How is the best way to do overlay in jQuery? If i click on button overlay then i would like overlay (same as fancybox) all div#main, for example background-color: blue and transparency 0.5.
Use position:absolute to place the overlay div and use jquery toggle to show it.
CSS
#main {
width: 200px;
height: 200px;
background-color: yellow;
position:relative
}
#overlay{
background:rgba(0, 84, 214, 0.5);
height:100%; width:100%;
position:absolute;
top:0; left:0;
display:none
}
jquery
$('button').click(function(){
$('#overlay').toggle();
});
DEMO
What you have tried..??try to put click event like
$('button').on('click',function(){
//Do your stuff
});
Try this FIDDLE
I have a hidden div with a buttin that I would like to appear when you hover over the div 'person-wrap'. How can I do this? Should I use CSS tricks or can it be done with JQUERY?
JSFIDDLE:
http://jsfiddle.net/ceTdA/3/
The div I would like to have appear:
#buttons {
display: none;
position:absolute;
right:10px;
top:10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
}
Given that your #buttons div is a child of #person-wrap you can do it with just CSS:
#person-wrap:hover #buttons {
display : block;
}
Demo: http://jsfiddle.net/ceTdA/4/
You should try this code:
$("#person-wrap").hover(function() {
$(this).find('#buttons').show();
}, function() {
$(this).find('#buttons').hide();
});
nnnnnn explains a pure css way which is best, but it's pretty simple with jQuery as well, all it does is call the first function while the mouse is hovering and the second when the mouse leaves.
$("#person-wrap").hover(
function () {
$("#buttons").addClass("hover");
},
function () {
$("#buttons").removeClass("hover");
});
And simple css:
.hover{
display:inline;
}
add this css:
#profile-pic:hover #buttons{
display:inline;
}
here is working jsfiddle
I am using the slider http://marktyrrell.com/labs/blueberry/ and am trying to add description boxes that overlay the images and change with each div. I added a div class, but it is not showing up. Not sure if I also need to alter javascript?
css
.blueberry {
margin: 0 auto;
max-width:1280px;
position:relative;
z-index:1;
margin-top:-25px;
}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
margin:0;
padding:0;
list-style:none;
}
.blueberry .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }
.slides .description {
z-index:100;
position:absolute;
left: 0px;
background:#000;
color:#1d1d1d;
}
HTML
<div class="blueberry shadow">
<ul class="slides">
<li><img src="images/slide1.jpg" />
<div class="description">
<p>Kick off 2013 by starting a fundraising campaign to help people get access to clean water. It’s fun, it’s easy and it’s the best way we can think to start the new year.</p></div></li>
js
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
Thanks for any help in advance
You need to define css top property, see it works fine:
Note: Using div or p inside ul li is agaisnt to the web standarts. I suggest to use tags like span, em, s, i.