I scan trough a folder for images by using php,
i put them in a div with the ID of images.
I want that div to scroll on the x-axis and hide everything that overflows on the y-axis.
So here's my code.
HTML and PHP:
<div id="images">
<?php
//Displaying images
$imgID = 0;
foreach($images as $image) {
echo "<img id='img".$imgID."' onClick='displayImg(".$imgID.");' src='".$image."' height='".$imgHeight."' width='".$imgWidth."' />";
$imgID++;
}
echo "<script>var maxImages = ".$imgID.";</script>";
?>
CSS:
#images {
overflow-y:hidden;
overflow-x:scroll;
height:<?php echo $imgHeight; ?>px;
border:solid 1px #c4c4c4;
align-content:flex-start;
}
#images img {
padding:5px;
cursor:pointer;
float:left;
}
I've experimented a bit, But nothing i've tried seems to work.
Your question is slightly out of context but how about something like:
http://jsfiddle.net/bassmanpaul/u9Xx6/
This goes on the assumption that you have the image widths available in php ($imgWidth) which can allow you to create a large inner container.
Failing that you may need to give us a JSFiddle to demonstrate your issue in greater detail...
Related
I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
I want to display a image in a div section. Here is the css i am using
#imagesection {margin:10px 10px 10px 10px; float:left; border: 5px solid #f0f0f0;}
#container {width:90%; margin:3% 0px 0px 10%;}
#full_page {height:auto; width:auto;}
#name {background-color:#FFF; word-wrap:break-word; word-break:}
</style>
The image is being displayed well but when i added text ($name) It's loosing the style. Please check the image below
<div id="full_page">
<div id="container">
<div id="Gallery">
<div id="imagesection">
<img src = <?php echo $picture;?> />
<div id="name">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
</div>
I want the text to be continued in new line if length of image is exceeded.
I mean the text should be automatically adjusted with correspondence to image inside div, With out leaving blank spaces.
Please suggest me what should be done to achieve this...
Updated Snapshot :
Apply Float on your image tag
For example:
css
{
#image
{
float: left;
}
}
<img id="image" src = <?php echo $picture;?> />
Update:
After watching your updated screenshot. What I sugggest you can do is to get the width of the image and then pass that to your div that will automatically stops the text to overflow the div
Here is the code of getting height and width
<?php
list($width, $height, $type, $attr) = getimagesize("image_name.jpg");
echo "Image width " .$width;
echo "<BR>";
echo "Image height " .$height;
echo "<BR>";
echo "Image type " .$type;
echo "<BR>";
echo "Attribute " .$attr;
?>
Always set your img width, height, border and alt tags. I would also set the width of the image div and the text div explicitly. If you set all three of them to 500px for instance, the text should wrap.
I have a PHP site that displays a table of images.
Each image has a "backdrop" to them that is user defined. So, users can say "I want the red backdrop" and all images will be displayed, with a 10 pixel border of their color.
Also, it is a staticy backdrop.
To accomplish this, I first echo the static image, then the user color image, then the table image.
echo "<img src='Static.jpg' width='60' height='60' />";
echo "<img src='User$userColor.jpg' width='60' height='60' />";
echo "<img alt='TableImage' width='50' height='50' />";
Currentley, I push the latter two images up by attaching this to them:
style='position:relative; top:-55px; margin-bottom: -55px;'
This seems very hacky. Is there a nice CSS way I can stack the images, so that when I change the size or order I don't have to scan and edit the stylings of every image?
Thank you.
Your question is a bit unclear, but instead of using an image to create the 10px border around the static image, why not just use CSS by adding a class to each image you want the border?
.staticImage { border: 10px solid <?php print $color; ?>; }
You could store the color of border they want in a cookie for example.
CSS:
<img alt='TableImage' width='50' height='50' style="border: 10px solid $userColor"/>
Currently producing a Wordpress plugin that allows for multiple image sliders. At the moment, to make sure that the code is valid I am having to load each sliders dynamic styling into the tags. This is fine, however it loads the styling for all the sliders, which can really start to add a lot of code to the pages source if the users uses many image sliders.
So I'm trying to get the styling to only be added to the tags if the slider is actually displayed on the page. Is this possible? This is how I am currently displaying the styling:
function test() {
global $wpdb;
$table_name = $wpdb->prefix . "premiumslider";
$number = $wpdb->get_results("SELECT * FROM $table_name");
foreach ($number as $slider) { ?>
<style type="text/css"><?php if($slider->paginationstyle == 'icons') { ?>
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li{<?php if($slider- >paginationstyle=='icons'){ ?>background: url(<?php if($slider->paginationoff=='') echo WP_PLUGIN_URL.'/premium-slider/images/pagination.png'; if($slider->paginationoff!='') echo $slider->paginationoff; ?>) 0 0 no-repeat;<?php } ?>}
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active{<?php if($slider->paginationstyle=='icons'){ ?>background: url(<?php if($slider->paginationon=='') echo WP_PLUGIN_URL.'/premium-slider/images/pagination_current.png'; if($slider->paginationon!='') echo $slider->paginationon; ?>) 0 0 no-repeat;<?php } ?>}
<?php } ?>
<?php if($slider->paginationstyle == 'images') { ?>
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator { margin-top: 50px; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li img { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imgcolour; ?>; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active img { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imghover; ?>; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active img:hover { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imghover; ?>; }
<?php } ?></style><?php
}
}
How can I achieve this?
To display the above code I use:
add_action('wp_head','test');
And to display the slider ($id being the id of that particular slider; 1, 2, 3, etc):
premium_slider($id);
This is sort of a complicated question. First of all, I disparage you for using a global variable, especially a DB resource. I'm also unclear as to why you need to echo the styles directly in this way.
Now to help you:
The only way to really solve this that I can see is if you have all of the styles stored somewhere, such as a DB, a config file, or any such thing per style. You must know the styles beforehand because you are hard coding them here. So just cycle through and if the ID of your slider matches its style, print the style. If you stored all of the styles in a big array in another php file hashed with the ID of the slider, this would be simple.
How do you determine which sliders appear on the page? Effectively you would need to alter your query to be the same as the one which actually loads the sliders, that way the CSS would only be loaded to display the same sliders.
$table_name = $wpdb->prefix . "premiumslider";
$number = $wpdb->get_results("SELECT * FROM $table_name WHERE category = 'cars'");
This would only load the elements into the foreach array that are displayed on that particular page.