I am rendering thumbnail images from a directory as horizontal gallery using PHP. I am trying to put a border around the clicked image by setting the image to active, which is not working. The following is the html and css.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
#loaded_img_panel {
display:flex;
flex-wrap: nowrap;
}
#loaded_img_panel > ul > li {
list-style: none;
}
#loaded_img_panel ul li img {
display: inline;
width: 210px;
height:175px;
margin: 0;
padding:0;
cursor: pointer;
}
#loaded_img_panel img:active {
border: 0.4em solid red;
}
#loaded_img_panel img:hover {
opacity: 0.5;
border: 0.4em solid red;
}
</style>
</head>
<body>
<div class="loaded_img_panel" id="loaded_img_panel">
</div>
</body>
</html>
<script>
window.addEventListener('load',function(e) {
var folder = "thumbnails";
if (folder !== null && folder !== "") {
$.post("loadimages.php", {'folder' : folder}, function(output){
$("#loaded_img_panel").html(output).show();
});
}
});
//Put border around the selected image
$('#loaded_img_panel').on('click', 'img', function() {
$('#loaded_img_panel img').removeClass('active');
$(this).addClass('active');
})
</script>
The following is the php script:
loadimages.php
<?php
session_start();
$folder = $_POST['folder'];
$tardir = "projects/" . $folder . "/thumb/*.jpg" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$filnam = substr($filname, -5);
$filnam = rtrim($filnam);
echo '<ul class="item">';
echo '<li><img src="'.$num.'" id="thumbNails'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
?>
The php renders images from the directory and the css sets it to horizontal gallery. On hover and onclick I am able to see the red border, but when I release the mouse the box disappears.
I tried, changing the click path from img to #loaded_img_panel > ul > li > img and similar other variations but they were not working.
You need to change #loaded_img_panel img:active to #loaded_img_panel img.active. That way once you assign the active class to the image it will remain highlighted instead of just while you click on it (which is what :active) means.
Related
Hi everyone thank you for your time
Please help me fix the html code below i am trying to achieve every time user/browser refreshes the page the image refreshed (random order) at the moment it is working fine. however the image does not get resize automatically to fit the screen, in other words if image is bigger than the screen then i have to scroll down/right to see the image please help me fix this driving me nuts
I have to folder called
domain.com/index.php
domain.com/images folder which contains all the images
<!DOCTYPE html>
<html>
<body style="background-color:transparent;">
<style type="text/css">
.myImage
{
// margin: auto;
// display: block;
height: auto;
width: auto;
// padding: 0px;
//object-fit: contain
// overflow-x: auto;
// white-space: nowrap;
}
</style>
<?php
$folder = opendir(images);
$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
$images[$i]= $file;
$i++;
}
}
$random_img=rand(0,count($images)-1);
echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage" ';
?>
</body>
</html>
First off, you're not closing your tag. You're missing the closing >. I know these things are sometimes easy to miss when you've been working on something for awhile.
It should look like this:
echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';
You could possibly be able to solve your problem but putting this section of HTML in another div and defining a width for that div so that it is smaller than your screen size.
For example:
echo '<div class="imgbox">';
echo '<img src="images/'.$images[$random_img].'" alt="image" class='myImage'>';
echo '</div>';
and then add CSS for that using either fixed pixels or responsive percentages
.imgbox{
width: px OR %;
height: px OR %;
}
EDIT:
<!DOCTYPE html>
<html>
<body style="background-color:transparent;">
<style type="text/css">
.myImage{
// margin: auto;
// display: block;
height: auto;
width: auto;
// padding: 0px;
//object-fit: contain;
// overflow-x: auto;
// white-space: nowrap;
}
.imgbox{
width: set px OR % values here;
height: set px OR % values here;
}
</style>
<?php
$folder = opendir(images);
$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
$images[$i]= $file;
$i++;
}
}
$random_img=rand(0,count($images)-1);
echo '<div class="imgbox">';
echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';
echo '</div>';
?>
</body>
</html>
You might try something like this. I tested on my local dev box and appeared OK. Hope this helps. You would have to make a few small tweaks to directory paths, but should work OK. The path to the directory containing the images must be the full path. "glob" is a PHP function that returns an array of the contents of a directory using pattern matching (see http://php.net/manual/en/function.glob.php).
<html>
<head>
<style type="text/css">
.myImage
{
height: auto;
width: auto;
max-width: 100%;
max-height:100%;
}
</style>
</head>
<body style="background-color:transparent;">
<?php
// Grab the contents of the directory using a file matching pattern.
$folder = glob(__DIR__.'/html/ImageFiles/*.jpg');
if (false === $folder || empty($folder)) {
// Show some default image.
} else {
// Randomize the array.
shuffle($folder);
// Grab the first element off the array.
$random_img = array_pop($folder);
// In the src= replace the full file path to make absolute path.
echo '<img src="'.str_replace(__DIR__, '', $random_img).'" alt="image" class="myImage">';
}
?>
</body>
</html>
I have a main Div which is the "master" of all divs. This div's width is 70% of the page. Inside this div, is another div that contains an image. This div is called mainImg. It is set to absolute positioning and all the rest of the elements are set to absolute as well. All these elements move absolutely relative to the main div.
Here's my code:
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
if ($id <= 3)
{
$images = $rows["image"];
$title = $rows["title"];
echo "<div id=main>";
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "</div>";
}
}
}?>
CSS
body{
position: relative;
}
#main{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
#mainImg{
position: absolute;
width: 65%;
}
#mainImg img{
width: 100%;
}
#mainTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 0%;
background-color: rgba(100, 0, 0, 0.7);
}
#mainTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 120%;
}
My problem that I am facing is that the div inside of mainImg (mainTitle), is not properly rigged inside the image. The div is a semi-transparent block that should fit perfectly on the bottom of the image with 25% height. Instead, the block is coming out of the image a bit. The other problem that I am facing is my text inside this mainTitle div. The text is centered, but not aligned in the middle of the div. I am trying to make the text responsive, with percentages, but whenever I resize the text always goes below the div. How do I fix these three problems? (Rigging the div properly, aligning the text, and keeping the text inside the div at all times for other window sizes?
The semi-transparent div is coming off the edge of the image
When browser is resized, this is what happens to the text
<?php
$res = $db->query("SELECT * FROM Articles");
if( $res->num_rows > 0 ) {
echo "<div id='main'>";/* Open main div outside the loop */
while( $rows = $res->fetch_object() ) {
$id = $rows->id;
if ( $id <= 3 ) {
$image = $rows->image;
$title = $rows->title;
if ( $id == 1 ) {
echo "
<div id='mainImg'>
<img src='$image'>
<div id='mainTitle'>
<h2>$title</h2>
</div>
</div>";
}
}
}
echo '</div>';/* close main div */
}
?>
I can not find where the error is. I need to change the color of the current month in select option(only world "(current)")
Instead of that font tag you can style the option itself.
<?php
/*Array of months*/
$months = Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$gd = getdate();
echo "<select style='font-size:40px;width:50%;float:left'>";
for($i=1;$i<=12;++$i)
{
/*Specify which style you want to apply*/
$style = ($gd['mon']==$i)?"style='color:red;'":"";
echo "<option value='".$i."' $style>". $month[$i] ." (current)</option>";
}
echo "</select>";
?>
Anyway this will color entire option not only current. Because it is not possible for an option to hold anything apart from plain text. So without using native select you can try this. code is heavy sorry for that but you can achieve what you want.
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<?php
$months = Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$gd = getdate();
echo "<select id='selectbox1' style='font-size:40px;width:50%;float:left'>";
for($i=1;$i<=12;++$i)
{
if($gd['mon']==$i)
{
echo "<option class='container' value='".$i."'>".$months[$i]." (current) </option>";
}
else
{
echo "<option value='".$i."'>".$months[$i]."</option>";
}
}
echo "</select>";
?>
<script type="text/javascript">
// Iterate over each select element
$('select').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color:red">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
</script>
<style>
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial,Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active,
.styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
color: green;
}
.options li:hover {
background-color:#39f;
color:white;
}
</style>
example fiddle is : http://jsfiddle.net/tintucraju/3u9fkyd3/
The code itself seems to be correct. But as it can't be copied because of the image, i'm not willing to write it again.
Your main problem seems to be the current is not styled inside the select dropdown. Which could be a browser specific behaviour. To see if this is the case just replace the select with ul and the option with li tag. When it's shown correctly then you can't use font inside the option. Because select is a element which style is defined by the browser.
This is also the reason why bootstrap uses ul/li for rendering dropdown. As they can be styled independently from browsers.
I once created an image gallery using CSS which did the following:
Created a thumbnail gallery
Created a div where in there was placed 1x1 pixel images
on mouseover of thumbnails, these 1x1 pixel images expanded to fit the div size, with height being relative to length.
My code so far:
php:
echo '<div id="thumbnails">';
$files = glob("11-09-2012/*.*");
for ($i=1; $i<count($files); $i++)
{ //creating thumbnails
$num = $files[$i];
echo '<img src="'.$num.'" height="50px" id="thumb'.$files[$i].'"></img>';
};
echo '</div><div id="gallery">';
for ($i=1; $i<count($files); $i++)
{ //creating 1x1
$num = $files[$i];
echo '<img STYLE="position:absolute" src="'.$num.'" height="1px" width="1px" id="img'.$files[$i].'"></img>';
};
echo '</div>';
CSS:
#gallery {
margin: 0 auto;
border-style: solid;
border-width: 3px;
border-color: #fff;
width: 800px;
height: 600px;
}
Now I'm not sure where to go - Any help is appreciated - alternative ways to do this, is as well.
Best regards - Jesper
A naïve programmer might recommend jQuery, or attach an event to each individual image. Here's how the big boys do it:
(function() {
var box = document.getElementById('thumbnails'),
handler = function(e) {
e = e||window.event;
var tar = e.target || e.srcElement,
type = e.type, id = tar.id, m, img;
if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
}
};
if( typeof box.attachEvent != "undefined") {
box.attachEvent('onmouseover',handler);
box.attachEvent('onmouseout',handler);
}
else {
box.addEventListener('mouseover',handler);
box.addEventListener('mouseout',handler);
}
})();
The only change you need to make to your HTML is to remove the width="1px" height="1px" from your images and instead add width:1px;height:1px;max-width:800px;max-height:600px; to the image's style. This would be better done in the CSS file:
#gallery>img {
position: absolute;
left: 0; top: 0;
width: 1px; height: 1px;
max-width: 800px;
max-height: 600px;
}
http://jsfiddle.net/yDUMT/
The jsfiddle shows the onMouseOver being used with a javascript function to enlarge the 1px when the thumbnail is mouse overed, and the onMouseOut being used with a javascript function to shrink the enlarged 1px image back down when the mouse is moved off the thumbnail.
I created a custom gallery and it works perfectly in internet explorer however in firefox and chrome it doesn't work like it should. The lightbox doesn't pop up on the clicking the thumbnail link, you have to click it twice, when clicked once the backdrop comes up but not the lightbox, but then on clicking the thumbnail twice it centers and pops up. And I have no clue why, please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Album</title>
<script type="text/javascript" src="hftpnyc/js/jquery-1.7.1.min.js"></script>
<link href="albums.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="Website/print.css" rel="stylesheet" type="text/css" media="print"/>
<style type="text/css">
body {
}
.backdrop
{ position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:black;
z-index:50;
display:none;
}
.smllpic a {text-decoration:none;}
.box
{margin:auto;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}
.close
{
position:absolute;
right:6px;
margin-top:3px;
cursor:pointer;
font-size:20px;
font-family:acens;
font-weight:700px;
font-stretch:narrower;
opacity: .3;
}
.smllpic img{cursor:pointer; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); };
}
</style>
</head>
<body>
<div id="contentcontainer" style="width:100%;clear:both;">
<div id="wrapper" style="width:981px; height:100%; margin:0px auto;">
<div style="margin:0px auto;width:979px;">
<h2 style="font-family:Tahoma, Geneva, sans-serif; color:#333;border-bottom:#A3308E solid 1px; background-color: #E6E6E6;"> Album </h2> </div>
<div style="float:right; margin-right:3px;">
<form action="" method="post">
<a href="Albums.php">
<input type="button" name="Uploadmre" value="Upload more" style="border: 1px solid #d0ccc9;right:0px;background: #fff;color: #5f95ef;font-size: 11px;font-weight: 700;height:22px; margin-right:7px;">
</a>
</form>
</div>
<div id="page-wrap" style=" width:918px; margin: 0px auto;clear:both;">
<?php
error_reporting(0);
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file;
}
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
$images_dir = 'hftpnyc/thumbs/';
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/';
$thumbs_width = 100;
$images_per_row = 11;
$string = "";
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
//if(!file_exists($thumbnail_image)) {
//$extension = get_file_extension($thumbnail_image);
//if($extension) {
//make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
//}
//}
error_reporting(0);
echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></div>';
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
}
}
else {
echo '<p>There are no images in this gallery.</p>';
}
?>
</div>
</div>
</div>
<script type="text/javascript">
$(document).height();
$('.backdrop').height($(document).height());
$(document).ready(function(){
$('.smllpic img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.7'},200);
});});
$(window).bind("load", function() {
var preload = new Array();
$(".box").each(function() {
s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
preload.push(s)
});
var img = document.createElement('img');
$(img).bind('load', function() {
if(preload[0]) {
this.src = preload.shift();
}
}).trigger('load');
});
$(document).ready(function(){
function centreit(){
//get the height and width of the modal
var modal_height = $('.box').height();
var modal_width = $('.box').width();
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//calculate top and left offset needed for centering
var topp = (window_height - modal_height)/2;
var left = (window_width - modal_width)/2;
//apply new top and left css values
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); };
$('.lightbox').click(function(e) {
e.preventDefault(); // keeps new page from loading
var thisPicture = $(this).attr('href'); // path to full sized picture,
function getit(){
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;z-index:50;"/></div>');
};
$(window).resize(function(){
$('.box').resize();
$('.motown').resize();
centreit();
});
getit();
centreit();
$("html").css("overflow", "hidden");
$('.backdrop').fadeTo(500,0.9);
$('.box').children().fadeIn(1000);
//$('.backdrop').css({ 'display' : 'block', opacity : 0});
$('.close').click(function(){
close_box();});
$('.backdrop').click(function(){
close_box();});
function close_box(){
$('.backdrop').remove();
$('.box').remove();
$("html").css("overflow", "");};
});});
</script>
</body>
</html>
You should try:
margin: 0 auto 0;
left: 0;
right: 0;
To fix the centering. So that would leave you with:
.box
{
margin:0 auto 0;
left: 0;
right: 0;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}