I have saved images on the server. They are linked in a database. How can I display the images in a square without cutting them? The images have different proportions of the sides.
I want the image to be displayed square. When you click on it, I want the image to be displayed in the normal shape.
Can anyone help me? (Javascript is also ok).
Thank you!
extension
<?php
$path = "medien/benutzer/8/";
$dir = opendir($path);
$extensions = array("jpg", "bmp", "gif", "jpeg", "png");
while(($file = readdir($dir)) !== false)
{
if(in_array(pathinfo($file, PATHINFO_EXTENSION), $extensions))
{
echo "<a data-fancybox='gallery' href=".$path.$file."><img src=".$path.$file."></a>";
}
}
?>
it is to be compared with Instagram. The posts in the profile are displayed one after another in a square. If you tap on it, you can view the whole picture.
I have several images in a folder that should be displayed in the same way.
Give this a shot.
.image {
height: 100px;
width: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="image" class='background-image: url("/path/file.ext");'></div>
Related
This is WordPress site that I'm updating. I have two images; one for larger screens and one for smaller screens/mobiles.
I'm aware I can do this through CSS, but the background images are intended to be changed by the user who don't have access to the CSS. I have some custom fields created on the Wordpress that allows them to easily change the images.
At the moment I have this in the PHP page, which only works for one image:
<div class="block block--overlay" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">
</div>
What's the best way to have something like this?
<div class="block block--overlay" style="background-image: url('<?php if_large screen: echo theme('background_image', 'url') else echo theme('mobile_background_image', 'url'); ?>');">
</div>
I've read about the wp_is_mobile() function and that it's not very reliable, and doesn't work responsively.
What other alternatives do I have?
You can inject a css variable for esktop and mobile versions, and use this variables in css #media queries.
the php will look like this:
<div style="--desktop: url('<?php echo 'https://picsum.photos/id/1/600/400'; ?>'); --mobile: url('<?php echo 'https://picsum.photos/id/1/200/600'; ?>')"></div>
The output should be like this:
:root {
--desktop: "placeholder-url";
--mobile: "placeholder-url";
}
div {
height: 100vh;
}
#media screen and (max-width:520px) {
div {
background-image: var(--mobile);
}
}
#media screen and (min-width:520px) {
div {
background-image: var(--desktop);
}
}
<div style="--desktop: url('https://picsum.photos/id/1/600/400'); --mobile: url('https://picsum.photos/id/1/200/600')"></div>
So I want to display a background image (that is the thumbnail image in wordpress post) using css in hero-wrapper div if the screen size is min. 900px.
I have using php to check if there is a thumbnail image, then using javascript to check screen width and then adding background-image property to the dive. Not working, I think my logic is wrong??
HTML
<?php
if ( has_post_thumbnail() ) { ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
<?php } ?>
<section class="hero-wrapper">
<figure class="frontpage-hero">
<div class="banner-box">
<h2>GET YOUR FREE CASE ASSESSMENT?</h2>
<h6>Enter your details below for a consultation</h6>
<form>
<input type="text" name="name" placeholder="Name..">
<input type="text" name="email" placeholder="Email..">
<input type="submit" name="submit">
</form>
</div>
</figure>
</section>
css
.hero-wrapper {
margin: 0;
padding: 0;
min-height: 669px;
background-repeat: no-repeat;
}
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
}
}
You are echoing a <section> tag inside a <script> tag.
You should change this
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
To something like this
<script type="text/javascript">
if (jQuery(window).width() >= 900) {
$('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
}
</script>
Your assumption is wrong twice:
your jQuery(window).width() == 900 condition will run only once and will not reflect window size changes
you're trying to use php (server side language) to output html (client side markup) inside javascript (client side code) code block. You will end up with syntax error.
Correct approach is to just output your html element and use CSS media queries to control its appearance. Something like:
.hero-wrapper {
display: none;
}
#media (min-width: 900px) {
.hero-wrapper {
display: block;
}
}
Please also notice that image displayed as background will not enforce element to have any height and hence your element will show up with 0px height (invisible in other words). You will need to specify element's dimensions somehow (and remember that images may have different aspect ratios).
After all it may be easier for you to not use background image but insert normal image instead and control its dimensions using CSS.
You're not adding anything to the existing "hero-wrapper" div with your code, you're just echoing some HTML within a Javascript block, which won't achieve anything. You've almost certainly got syntax errors in your console. The final rendered page will look something like this:
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<section class="hero-wrapper" style="background-image: url('thumbnail.png') >
}
</script>
<section class="hero-wrapper">
<figure class="frontpage-hero">
...etc
This will get you a JS console error along the lines of:
Uncaught SyntaxError: Unexpected token <
Even if that part worked, the HTML is also invalid because you never close the style attribute with a ", and this code will only ever execute when the window width is exactly 900px, which I don't think you intended.
What you need to be doing is altering the existing div to add the style, and also allow it when the width is greater than or equal to 900px. This should do it:
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() >= 900) {
$(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
}
});
</script>
I also wrapped the code in document.ready so that it won't run until the page is ready.
I'd remove the javascript and do this in your CSS media queries with display: none; to hide the element for screens under 900px i.e
HTML/PHP
<?php
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >';
} ?>
And in your CSS
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
display: block;
}
}
#media screen (max-width: 900px) {
.hero-wrapper {
display: none;
}
}
once we hover on image, i want to display another image.
<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>
i tried as below :
I added class="a1", but it did't worked for me.
<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
css
.a1:hover {
background-image: url('images/G+1.png');
}
Here are two solutions for your query. (Change image on mouse hover)
HTML + JavaScript Demo
<div class="image_hover">
<a href="#" rel="nofollow">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
</a>
</div>
HTML + CSS Demo
.image_hover {
position: relative;
cursor: pointer;
}
.image_hover img {
position: absolute;
transition: opacity .5s ease;
}
.image_hover img:hover {
opacity: 0;
}
<div class="image_hover">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
<img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>
First, give your link tag some style, to set it's background.
a.a1 {
display: block;
width: 100px;
height: 50px; (width and height are whatever you need them to be)
background: url('images/G+.png') no-repeat center center;
}
Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.
Then, for the rollover effect, you use:
a.a1:hover {
background: url('images/G+1.png') no-repeat center center;
}
Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.
I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.
SO link on the subject (as per comment):
CSS: image link, change on hover
Additional the answer in #AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.
The plus
It's generic solution. You have not to set the width and the height of the link - like in background-image way.
The minus
You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.
a:before {
content:url(http://i.stack.imgur.com/upUcm.jpg);
}
a:hover:before {
content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}
The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.
CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}
HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>
http://www.chooseyourtelescope.com/ (>> Please watch it on a minimum 15'' screen, the site is not entirely responsive yet and you wont see what I'm talking about)
When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image0>blank>image1). And worknig on IE11 but sometimes with a lag. I didn t try with the other browsers.
How to make a smooth transition?
A quick fade Image0>image1, not image0>transition color>image1
Here is the code for the MOON button. Thats the same with the others.
(I don't know anything about Javascript. I found the script below on Stackoverflow.)
HTML
<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>
CSS
.image-home {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
display:inline;
top:0;
}
JAVASCRIPT
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")')
}, function() {
$body.css('background-image', '')
})
})
You need to change just your script code if you want smooth transtion.
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
});
}, function() {
$body.css('background-image', '')
})
})
If you want to do best solution for this you need follow the steps below.
Firstly you need to defined your path of images in the js with the below code.
var imgs = [
'http://i.imgur.com/DwLjYhh.jpg',
'http://i.imgur.com/gAlqfUU.jpg'
];
After this step, you need to add new attiribute your buttons like data-id.
<div class="top-logos-home" id="top-logos-moon-front" data-id='0'>
<img src="button_image_jpg" alt="MOON">
</div>
When you defined all variables, you need to detect the hover with your current code and choose the right image that is in imgs array for your background.
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
//fade out slowly element and after change the style of inner elements then fade in slowly.
$body.css('background-image','url('+imgs[$(this).attr('data-id')]+')').fadeIn('slow');
});
});
});
In my personal opinion; Image transitions shouldn't manage in this way. Create different element for each planets. When user click the button, planets slip and overlapping. You can see a demo in the below code.
http://codepen.io/thegeek/pen/GDwCa
I found a solution by using the opacity property. Now its working perfectly.
HTML
<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />
CSS
.hover-backgrounds {
opacity:0;
transition: opacity 0.6s linear;
top:0;
position:absolute;
background-size: 100%;
}
JAVASCRIPT
$(document).ready(function (e) {
$("#top-logos-lune-front").hover(function (e) {
$("#background-moon-front").css("opacity", "1");
}, function() {
$("#background-moon-front").css("opacity", "0")
})
});
I'm using on my website a page that displays images in a Grid.
What I'm trying to do is to open a full size version of my image when clicking on it.
When clicking on an image, a div displays over the thumbnails, containing the same image but with different width and height, and the div has to be on the top left of my container grid. something like an overlay but I don't what's the best method to do it. i don't want to use a lightbox.
my original size photos is :
.photo_medias{width:233px;height:133px}
and the full size should be :
.photo_medias{width:706px;height:364px}
here is a jsfiddle of my grid : http://jsfiddle.net/aaWLJ/9/
can anybody help me with this ?
thanks a lot for your help
This is not the full answer (some css is needed to do it beautifully), but:
JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /></div>");
});
CSS:
.container .mix{
position: relative;
display: inline-block;
}
.photo_medias{width:233px;height:133px}
.big-img-cont{
position: absolute;
top:0px;
left:0px;
}
.big-img-cont img{
width:706px;height:364px
}
EDIT:
regarding your second question (in your comment), you can do something like:
JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /><a class='close-img' href='javascript:void(0);'>close</a></div>");
});
$(document).on( "click", ".close-img", function(){
$(".big-img-cont").remove();
} );