I creating gallery, and I want to create frame around the picture.
But this picture must be scalable. Width and height of this frame generated by width and height of image.
And must to have possibility to change height of frame through the JavaScript.
Thanks.
PS: First of all, I must to have possibility to make frame narrow through the JavaScript.
If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.
And #top, #right, #bottom, #left are using repeated image for their backgrounds.
Check attached image where I put lines where you should cut original frame-image.
This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.
This can be quite tricky to pull off.
If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo
Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.
The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.
Narrowing the frame with Javascript is the easiest part, really.
Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:
var photo = document.getElementById('photoFrame');
photo.width = '200px';
You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.
You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:
Image 1 - Top-left corner and top and left sides of the frame.
Image 2 - Top-right corner and right side of frame.
Image 3 - Bottom-left corner and bottom of frame
Image 4 - Bottom-right corner of frame
Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.
I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?
The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.
Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
How do I move background images with the window upon resize? I am using a sprite, but if it is too difficult to do it that way that I can change the background image to single images. I have my code below:
html:
<nav class="topNav">
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ulstyle="list-style-type:none"></nav>
I also included 2 images. The first one is what is happening at about 1200px. The second is what it looks like at 1000px. What I want to do is slide the 'account, support, shopping cart' images over so that the space between them does not change. The 'sale' image should not move. Do I need javascript or can I do this with CSS?
I think the key question is the size of <a> is zero. so you should add a div into the <a> tag.
please refer to my amendment. by the way, the you should add ul li{float:left} to let the li stand Horizontally
http://jsfiddle.net/Uh5Uh/3/
Try this CSS:
#my_account, #support, #shopping_cart{
position:fixed;
}
In your jsFiddle, I'm getting the entire image stretching horizontally as I change window width. This isn't so much to do with your spacing increasing, it's occurring because your items are all positioned absolutely (so each item's left edge will always be that distance away from each other) and the width of the item itself is widening as you change page width.
Which stops once the window width is less than 1335px.
In short: your media query is mucking with your icons. It's stretching the images (because you used % for background-size, it is sizing the background to the width of the item, which is also a %, so is also getting wider.)
http://jsfiddle.net/Uh5Uh/2/
#daily_sale a{
background: url('http://phantomsupply.com/v/vspfiles/templates/223/images/homepage/daily sale button black site.png');
background-repeat:no-repeat;
}
Basically, removing the background-size (so the image doesn't stretch) don't muck with the min- and max-widths, exchange the left properties on those three items for a right property, set the distances, and it will be fine.
You just have to set a min-width on body so that the items now don't overlap each other (since they're still positioned absolutely.) Alternatively, achieve it with floats instead of absolutely positioned elements.
what i have is this:
<style>
#main{position:relative; width:600px; height: 600px;}
#cover{position:absolute}
#image{position:absolute}
</style>
<div id="main">
<div id="cover"><img src="template.png" /></div>
<div id="image"><img src="user.jpg" /></div>
</div>
what i need is to be able to move the user image around, but it will be covered with the cover div that will mask my other one. is there a way for that?
in addition i need to know if it is possible to have the div#cover only with the png file in it but where the size of the image is not as big as the id#main so the rest of the cover div will be background color white - without getting a white color in the image area?
update:
i want to have a layer (div#cover) that will cover another layer(div#image). in the first one i will have a circle that the inner of it is transparent and the outer is white so i will be able to see the bottom layer img within the cover layer
i will have jquery dragable to the second layer but it wont work becuase of the top layer that will block it from being draged with the mouse
my question was - is it possible to have the bottom layer to be draged when there is a cover layer on top of it?
If you want to cover a div with another div, use z-index property:
#cover{position:absolute;z-index:101;}
#image{position:absolute;z-index:100;}
I can't answer to your second question, because I don't understand it. Can you explain it more precisely?
Edit: after your edit I understand what you mean: you want to move an image that is under some kind of cropping frame. I think it's more complicated than using 2 divs and CSS...
Very difficult to answer a question one can't understand.
How to make a image/container draggable : http://jsfiddle.net/cNtfM/
Using jQuery/jQuery-UI is the easiest way in my eyes.
Your CoverImage will be above the other image coz you are writing it to the page before the main image. [renders from top to bottom]
I have know idea if this answers your question.