I'm editing a website that contains an image slider that displays two images side-by-side, however when i view the website in chrome the images are not inline with each other like so: http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg
I use php and html to get data from a database and display the images based on the data gathered. I have tried to target the images individually in my css but it either doesn't work or effects both images.
Is there a correct way of targeting the images individually or how can i fix this?
php code:
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<u1>"; ?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4></li>
so i managed to solve it:
#media screen and (-webkit-min-device-pixel-ratio:0){
#mi-slider li {
vertical-align: top;
}}
Place the < ul> having a width so much that it can hold both images side by side and give style='display:inline' for the ul.. You will get the images inline
This is more of a css question.
You have one of to options, using an inline list or a float.
personally i line inline list, you could also use a table but that is considered bad practice.
You could also use java script to calculate the position, which is also bad practice if used improperly.
W3schools.com should be a good reference if you dont know how to implement these properties in css.
Next time please replace your php with static information so it looks better :) cheers
Related
I am trying to pull images from a database into an html table as a php variable:
<img src=img/$image&w=100&h=150>
the image does not show, but everything else in the table pertaining to the product shows
If I change the code adding a space after the variable:
<img src=img/$image &w=100&h=150>
The images show but they are very large.
How do I get $image to show at w=100 and h=150 within the table?
Thanks!!
OK I figured it out:
CODE:
<img src='img/$image' class='scale-down' style='width:100px;height:150px'>
CSS:
.scale-down {
object-fit: scale-down;
}
If the code below doesn't work for some reason, be sure you linked your CSS file.
CODE:
<img src='img/$image' class='scale-down'> <!-- Removed style attribute --!>
CSS:
.scale-down {
width:100px;
height:150px;
}
Another interesting point is if you want to you the object-fit then you can. Meaning you would have the images contained by the size of the elements you are putting them in. Therefore, you should be defining the width & height of the element that contains the images and then you can do as you did:
In this example I wrote td but I don't know what element contains your images so be sure to change it, if it is different.
td {
width:100px;
height:150px;
}
.scale-down {
object-fit: scale-down;
}
If your aim is to learn web-development then you should also be thinking about the client as kerbholz rightly points out:
Probably. Scaling down an image via CSS/style isn't a performant solution though, clients would still need to transfer for example a 1920x1080 image only to scale it down to 100x150. Anyway. – kerbholz
Please be aware that many questions about web development have already been answered here and on the web. Good luck!
The following are links to CSS, these websites have a lot more than just CSS.
MDN is really useful if you want to know more:
https://developer.mozilla.org/en-US/docs/Glossary/CSS
W3 is also useful but they don't always do as good of a job:
https://www.w3schools.com/w3css/
I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.
<div class="grid-block" id="page">
<div id="page-info">
<h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>
</div><!-- #page-info -->
</div><!-- .grid-block #page -->
The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.
In addition, I understand that I 'could' use #media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/. I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.
Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.
I have an interesting question, or atleast I think it is.
I have this website http://21-card-games.com/best/casino-reviews/casino-casino-titan.asp. You will see the image and below it the content.
Is it possible to combine the image with the text and left align the image and make the text flow next to the image.
The pages are all dynamically created, The content on the page is a variable that I import from a mysql db...
Here is some of the coding:
<div id="yui-main"><div class="yui-b"><?php echo $g_page_content2 ?><br />
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/standard_images_screenshot_1.php');?><?php echo $g_content_text1 ?>
<?php /* This is the second banner for this page */ include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php');?></div>
The $g_content_text1 is the variable that pulls in the text, and the '/includes/standard_images_screenshot_1.php' is the image. The include image file is part of a script that creates the image on the fly (imagick).
However this is more or less what I where thinking:
to create a regex that replaces the first occurance of <p> with this include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php' but I am not sure if the php will still execute if I do that...
Any ideas on how I can accomplish this would be appreciated.
I don't get it.
Why you want to create a regexp to let the text flow on the left of the image?
This is a css issue.
Just add float:left to the image.