I'm using slimbox to create a pop-up image option.
Everything works as expected but I want to add a "restriction" to the max size of an image after it's been poped-up.
I now have an image with a width of 3572px. I have no control over the image size my clients upload to the website so I need to set a max width for them.
I have looked at the css that create the box but I can't find a way to add a max-width element to any class or id.
Here is the output of the page if an image is clicked:
<div id="lbOverlay" style="visibility: visible; opacity: 0.8;"></div>
<div id="lbCenter" class="" style="top: 0px; width: 3572px; height: 2164px; margin-left: -1786px; left: 840px;">
<div id="lbImage" style="visibility: visible; opacity: 1; background-image: url("http://www.xxx.nl/large-image.jpg");"></div>
<div style="position: relative; width: 3552px; height: 2144px;"></div>
</div>
But I think that somewhere in the .js the size of the image is calculated.
My .js sucks so I won't be able to find it (I still gonna try)
I hope anyone uses slimbox and can help me!
M.
---------- UPDATE -----------
Crap; I found this:
SlimBox FAQ
Related
I have an HTML structure with a mosaic of image : 4 images per row.
When I click on an image, I would like to make a full-width div appears below the row where the image is.
And I need to have that element (.div-full-with) to remain in flow.
Here is a schema :
I’ve tried absolute positioning but the element is not in flow of course.
.div-full-with {
background-color: #333;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px;
}
I’ve tried some other technics (calculate, etc) but I can’t achieve this.
If the structure was static, it would be very easy. But I'm in a loop and I have to make it in a template like this where there is only only one element :
<div class="col-md-3">
<img src="..."/>
<div class="hidden-div">some content in full width</div>
</div>
My page starts (first thing after the <body> tag) with this:
<div id="wallpaper" style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;">
<img src="images/black-matte-1650-Lit-Etched.jpg" style="width: 100%; height: 100%;" alt="">
</div>
This works fine on every browser except IE when it is in Compatibility View mode. Even most IE version display this correctly, but only if not in Compatibility View mode.
The content is supposed to "hover" over the background image so that as the page scrolls, the content scrolls, but the background remains stationary. Instead, the rest of the page's contents are pushed down to the bottom of the background image, and they render from there. So, my page appears to be nothing but it's background image, and you have to scroll down to see the page content below it.
Can anyone explain what is wrong, and how to fix this?
If you just want a fixed background image, I would not use a div. Try this instead...
CSS:
body{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
Then remove your wallpaper div and image from the HTML.
Edit: You could also apply that CSS to your div if that div needs a different background than the rest of the page:
div#wallpaper{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?
There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.
I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.
I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.
you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.
How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,
Picture before :
I want the highlighted location on the following image to be viewed :
Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales,
AND how to resize is after cropping ?
Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/
One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.
Here's an example of the approach:
HTML
<div id='crop-the-cats'>
<img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -60px;
left: -70px;
}
See http://jsfiddle.net/Da9CT/
Another approach is to use the image as the background of the image and reposition it using background-position:
HTML
<div id='crop-the-cats'></div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
background-position: -50px -60px;
}
See http://jsfiddle.net/Da9CT/2/
You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit
Let me know if that helps!
I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.
I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.
Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.
The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)
I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.
Thank you in advance, Carl
So, as suggested in the comments
http://jsfiddle.net/lollero/Sw4y8/
It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.
HTML:
<div class="slide">
<img src="http://placekitten.com/g/500/230" alt="" />
<div class="text">Text</div>
</div>
</div>
<div id="thumbnails">Thumbnails</div>
CSS:
#slides {
height: 550px; /* or what ever amount is big enough to fit the text there too */
float: left;
position: relative;
z-index: 5;
}
#thumbnails {
float: left;
clear: both;
position: relative;
z-index: 10;
top: -110px;
}
.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }