I've been trying to move the small images (thumbnails) but it won't move. It just stays fixed to the left. I've tried giving it an div id and set the margins for it but it doesn't work.
Here are the codes:
JavaScript
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
CSS
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
Html body
<body>
<img src="images/small1.png" style="cursor:pointer" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" style="cursor:pointer" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" style="cursor:pointer" onclick="showImage('3_large.jpeg');" />
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" margin: 0; padding: 0;" />
</div>
</body>
</html>
Well, if it's the three imgs tags you're talking about, you have to set their style. Something like:
<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />
and
.smallimg {
cursor: pointer;
float: right;
/* or whatever position/top/left values you need */
}
Or if you want them centered, you could do something like this:
<div style="text-align: center;">
<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />
</div>
A solution based on my comment. Maybe you can go through this option:
HTML
<div class="container">
<img src="http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png" alt="" />
<img src="http://ecx.images-amazon.com/images/I/41P44yRoAPL._SL75_SS50_.jpg" alt="" />
<img src="http://ecx.images-amazon.com/images/I/41B9Qbj2CBL._SL75_SS50_.jpg" alt="" />
</div>
CSS
.container
{
height: 50px; /* img height */
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* half of the img height */
margin-left: -75px; /* half of the img width's total */
overflow: hidden;
}
.container > img
{
display: inline;
}
http://jsfiddle.net/qFmhf/
Related
Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
}
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<div id="description">TEXT HERE</div>
You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.
Details on MDN:
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
#container_display {
position: relative;
height: 60px;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
#container_display .spacer {
visibility: hidden;
position: static;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
<img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
You don't need this:
#container_display img {
position: absolute;
top: 0;
left: 0;
}
You could also add a break between both divs to create space between them, like this:
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<br>
<div id="description">TEXT HERE</div>
I have two images. One is transparent with a bit of opacity, like a shadow, and inside, or top or whatever you call it, I want to put an image that I will use as a button here is my HTML code:
body {
background-image: url(img/fondo.png);
}
div.numero {
float: left;
}
div.login {
float: right;
}
<div class="numero"><img src="img/numero.png" width="600px"></div>
<div class="login">
<img src="img/sombreado.png" />
<img src="img/1.png" class="1" />
<img src="img/2.png" class="2" />
</div>
The images 1 and 2 are the two images that I want to use as buttons.
Assuming you want to merge both 1 and 2 on the same place, you should make use of position in a clever way for this. You can do it by using:
body {
background-image: url(img/fondo.png);
}
div.numero {
float: left;
}
div.login {
float: right;
}
.login {
position: relative;
width: 100px;
height: 100px;
}
.login img {
position: absolute;
left: 0;
top: 0;
}
.login img.i-2 {
opacity: 0.5;
}
<div class="numero">
<img src="//placehold.it/600?text=numero" width="600px" />
</div>
<div class="login">
<img src="//placehold.it/100?text=sombreado" />
<img src="//placehold.it/100?text=1" class="i-1" />
<img src="//placehold.it/100?text=2" class="i-2" />
</div>
Make sure you don't give class names with just integers. It won't work.
I've been using this sample to create a "zoomable" content:
http://code.msdn.microsoft.com/windowsapps/Scrolling-panning-and-47d70d4c
My HTML:
<div id="zoomElement" class="zoomElement ManipulationContainer">
<img id="zoomContent" class="zoomContent" alt="" src="sample.jpg" />
</div>
My CSS:
.zoomElement {
overflow: auto;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 20%;
-ms-content-zoom-limit-max: 500%;
}
Now, no matter what, I've been unable to center the img in its container when it's unzoomed.
I have a series of images, which I want to make them showing in a row, i.e.
[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]
I want the overflow part will be hidden.
My current HTML is as follow:
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>
and this is the CSS:
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
Here is the jsFiddle. I would like to show half image in the edge of the screen, like this:
However, I can only manage to show full images only. How should I modify the HTML / CSS codes ?
Just use overwidth in percentage, and a mask div:
DEMO
#gallery {
width: 200%; /* this is the trick */
}
#gallery img { /* and no need to add class="gallery_img" to IMGs anymore */
height: 200px;
}
#wrapper {
height: 200px;
overflow: hidden;
}
<div id="wrapper">
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
</div>
</div>
EDIT
I'll add the simplest solution too (posted by #RupaliShinde), because it shows the correct use of the white-space attribute, and appearently it is hard to reproduce (reading the comments):
#gallery {
width: 100%;
overflow: hidden;
white-space: nowrap; /* this is the trick */
}
#gallery img {
height: 200px;
}
DEMO
Have a look at this fiddle - http://jsfiddle.net/jQkHp/
I added a wrapper div around gallery:
#gallery {
position: absolute;
left: 0;
top: 0;
width: 1200px;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
#wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
You will need to use some javascript to set the width of the gallery div for this to work properly (I'm only guessing at the width at the moment).
Edit - added some js to calculate the width of gallery based on the images inside it http://jsfiddle.net/jQkHp/1/
var galleryWidth = 0;
$('#gallery > img').each(function(){
galleryWidth += $(this).width();
});
$('#gallery').css('width', galleryWidth);
Just add this in CSS
<style>
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
white-space: nowrap;
}
#gallery img {
width: auto;
height: 200px;
}
</style>
Let rest of code be as it is.
I would suggest putting the images in an unordered list within your containing div, with each image in it's own LI and then set them to display: inline-block in the css.
You'll need some way of scrolling through the images, of course, for which you could use some jquery.
I'm looking to position images over top of a div which has a set background. I'm using CSS to style the div as well as the images sitting on top of the background but I'm not seeing the results that I'd expect. The images which are sitting on top of the div's background image does not adjust based on my pixel settings.
Here's my HTML:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected" />
<img src="images/color_C.png" class="c_image" />
<img src="images/color_K.png" class="k_image" />
<img src="images/color_M.png" class="m_image" />
<img src="images/color_Y.png" class="y_image" />
</div>
Here's my CSS:
#colorpicker{
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{
top: 50px;
right: 25px;
}
I can't make up from your question how exactly you want to position those four images, but I would make a selector for your images and not the parent div:
html:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected">
<img src="images/color_C.png" id="c_image" class="image" />
<img src="images/color_K.png" id="k_image" class="image" />
<img src="images/color_M.png" id="m_image" class="image" />
<img src="images/color_Y.png" id="y_image" class="image" />
</div>
css:
img.image {
/*whatever you want to do here*/
}
#colorpicker {
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{ top: 50px; right: 25px; }
Sidenote: you can just type/copy-paste the code here, select in and press the above 'code sample' button. This will display it correctly as you see above (make sure you do this for html and css separately) :-)
To get the images to "stack", with a margin between then, add the following CSS:
#colorpicker img {
display: block;
margin-bottom: 2px;
}
See http://jsfiddle.net/KX5mS/ for a working example.