Is there a gallery that have three features:
displays pictures in a lightbox
allows to import tens or hundreds of images at once from a folder
takes descriptions from file names
I have to make it on yesterday :)
I've made my own script together with original Lightbox
http://lokeshdhakar.com/projects/lightbox2/
Decided it will be much faster that way:
<?php
echo str_replace(array('<','>'), array('<','>'),'<table id="galx"><tr>');
$source_dir = 'images/taken/from/here';
$mini_dir = 'mini';
$target_dir = 'imagies/copied/to/there';
$i=0;
$images = array_diff(scandir($source_dir), array('..', '.',$mini_dir));
foreach($images as $image)
{
$filename = pathinfo($image, PATHINFO_FILENAME);
$title = mb_strtoupper(trim(str_replace('_',' ',$filename)));
$s = "<td><a href='$target_dir/$image' data-lightbox='galx' data-title='$title' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' /><br/>"
. "$title<a/></td>"; //gallery with titles
/*$s = "<td><a href='$target_dir/$image' data-lightbox='galx' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' />"
. "<a/></td>";*/ //gallery without titles
if (++$i % 5 == 0)
$s .= '</tr><tr>';
$s = str_replace(array('<','>'), array('<','>'), $s); //comment this line if want to paste it as php code
echo $s;
}
echo str_replace(array('<','>'), array('<','>'),'</tr></table>');
?>
Some basic css:
#galx {
width: 650px;
}
#galx td {
text-align: center;
}
#galx a {
display: block;
width: 120px;
font-size: 0.8em;
margin:1px auto;
text-decoration: none;
color: black;
text-align: center;
}
I've used FastStone Image Viewer to batch resize images at once and create miniatures. In app just press F3 to open advanced processing tool.
It just won't work with non-english letters on Windows - PHP bug. It still spoils first non-english letter of file name on Linux, so need to prefix '_' in such cases.
Overall good result - i've hided script somewhere on website and in 1,5 hours generated 6 galleries with ~1,5k pictures, and most of the time was consumed by file processing and copying. Not elegant but effective.
Related
I have this problem with a simple cms I'm working on:
I have a simple php function getting image elements from a specified directory, and printing them to the html
<?php if($row["imgs"] == TRUE){ ?>
<div class="imrow">
<?php
$dir = $row["folder"];
$img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
$tabing = 3;
$scale = sizeof($img);
for ($i = 0; $i < $tabing; $i++) {
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div><?php }//closing the first if of images ?>
(...)
<?php if($row["imgs"] == TRUE) { ?>
<div class="imrow">
<?php
for ($i = $tabing; $i < $scale; $i++) {
if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div>
<?php }//second if closing ?>
The style for images and rows:
.imrow {
display: block;
}
.imrow img {
z-index: 10;
float: left;
height: 100%;
cursor: pointer;
transition: transform .5s ease;
box-shadow: 1px 1px 12px rgb(200, 200, 200);
}
And are laid out using a simple jQuery function
$(".imrow").each(function () { // for every row
var row = $(this); //it gives it a name
var rowW = row.width(); //it seals it's width
var imgW = 0; //it sets a image width variable
var fixH = 600; //and get a fixed amount
row.children().each(function () {
$(this).css("height", fixH); //apply fixed height to element in order to get ratio
imgW += $(this).width(); //get the width of this and
$(this).css("height", "100%");
arr.push($(this).attr("src")); // restore
});
row.css("height", rowW / (imgW / fixH) - 2);
});
The problem here is the fact that some of the added Vertical images, turn out horizontal
Here's how it looks in a folder
And how it turns out in the website:
EDIT: This is a php only issue from what I see, because when I analyze the elements in chrome, the images are flipped by default inside, as you all can see here:
So my first bet goes on glob doing something wrong.
Has anyone experienced it, or knows a way to make glob get everything properly?
Bare in mind that this issue only happens to some of the images, and is not depended on the format of the displayed image.
Any help would be extremely useful
It appears the problem was metadata stored in the images that describe the correct orientation.
There is a image-orientation css property that is supposed to be used to display the image in the correct orientation, but it doesn't seem to be supported in all browsers.
The only other solution at the moment is to edit the image's metadata with a metadata editor or, as you have, to open the images in photoshop and save them.
I am using php to loop through and display all images from a directory. This works, however I want to add the image name underneath each of the images. I am struggling to get the text to center underneath it, as it seems to just place it next to it and appears to be in its own column separate to the image.
How do I go about fixing this? From research I've done the general solution seems to be placing them in a div together, I haven't done much php before but am I able to just stick the two echo statements inside of a div tag?
<div id="contentClothing">
<?php
function hoodie() {
$dir = 'images/clothing/hoodies/small/';
$files = scandir($dir);
$images = array();
foreach($files as $file) {
if(fnmatch('*.png',$file)) {
$images[] = $file;
}
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
foreach($images as $image) {
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<span>'.$image.'</span>';
}
}
?>
</div>
Here is the css
#contentClothing {
padding-bottom: 5%; /* Height of the footer element */
margin-left: 15%;
}
span {
text-align: center;
}
This is how it looks http://puu.sh/m8Zh0/6b0da6ec03.png
Instead of <span>, use <p> tag. Wrap the whole image and text inside <div> tag and apply your styles to it.
// your code
foreach($images as $image){
echo '<div style="text-align:center; float:left; clear:right;">';
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<p>'.$image.'</p>';
echo '</div>';
}
// your code
today I experimented with HTML tables and populating them from a MySQL database. My code worked well for what I needed and as is the table looked something like this:
http://codepen.io/anon/pen/ogYRwj
However I ran into a major problem when actually integrating it onto my website. I use the include statement to display my table as well as my menu to swap between all my webpages. The table was displayed like this:
So I experimented with the width of the tbody.td element and I ended up changing this code:
thead th,tbody td {
width: 20%;
float: left;
border-right: 1px solid black;
}
to this:
tbody td{
width: 10%;
float: left;
border-right: 1px solid black;
}
thead th {
width: 20%;
float: left;
border-right: 1px solid black;
}
And somehow, it freakin' worked! But the lines between the thead.th elements didn't line up with the lines of the tbody.td elements on other devices such as my android, but it worked:
The code works when I include it using the PHP statement include /path/to/file.php, but now if I try to directly view /path/to/file.php it looks really strange, similar to the first image above!
Now I can't figure out what is wrong with the first version and how to display it properly on other devices such as Android?
Please come to rescue CSS and PHP wizards!
(EDIT:
The HTML output is pretty much identical to the local except
with results from the MySQL database.
The table is put into a PHP file where I link to the CSS file using
<link rel="stylesheet" type="text/css" href="path/to/style.css">
I have one main PHP file (index.php) in which I include the PHP file containing the HTML table (logs.php) using a function called getPage.
This is the code for index.php:
<?php
require_once(dirname(__FILE__) . '/functions/functions.php');
getPage('includes','home');
?>
<html>
<head>
<title>Fågelmatare</title>
</head>
<body>
<h3>Fågelmatare</h3>
<hr />
Home |
Logs |
Videos |
About
<hr />
<?php
if(!isset($_GET['page'])){
getPage('includes','home');
}else{
getPage('includes',$_GET['page'], 'home');
}
//switch($_GET['page']{
?>
</body>
</html>
I click on the Logs hyperlink to display my table (in logs.php).
In functions.php
<?php
function getPage($dir, $filename, $default = false){
$root = $_SERVER['DOCUMENT_ROOT'];
$path = $root . '/' . $dir;
if(is_dir($path)){
if(file_exists($path . '/' . $filename . '.php')){
include $path . '/' . $filename . '.php';
return true;
}
if(file_exists($path . '/' . $filename . '.html')){
include $path . '/' . $filename . '.html';
return true;
}
if($default){
if(file_exists($path . '/' . $default . '.php')){
include $path . '/' . $default . '.php';
return true;
}
if(file_exists($path . '/' . $default . '.html')){
include $path . '/' . $default . '.html';
return true;
}
}
}
return false;
}
?>
Here is the source code for logs.php
I'm using nginx as my web server, running on a Raspberry Pi.
)
I have another approach, although cross browser support still isn't very good. It uses position:sticky so you'll need to test in Safari or enable experimental flags for position:sticky.
Here's the experiment:
http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100
The idea is that you wrap the <table> in a <div>, set that <div> to position:relative then simply set the <thead> to position:sticky;top:0;.
You can then just set the max-height and overflow on the wrapper <div> to make that scrollable. As it scrolls, the <thead> will stick to the top.
It is admittedly sort of a "cheap trick" because as you can see below the scrollbar starts at the top of the <table>, not the top of the <tbody>. It is quick and easy though and should be more relevant once browser support stabilizes.
Here is my problem.
I have a function, PHP class side, that reads all data from one table, create all divs with specific CSS ids, puts the data in place, and in one of them the data comes from an external source, an external php file.
So I do this in the code:
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= include($row['PathFile']);
$Return .= "</div><div id='PostData'>";
All divs are opening and closing properly, all data worked correctly until i changed the data that used to be loaded fom the table to the div here the included file is know.
The external file only have HTML code generated by HTML copy from Visual studio and its all good to, ive used to use that html code in other places, no problem till know.
So, the CSS are the ones that follow:
This is the CSS used to hold the included file:
#PostText {
text-align:center;
padding: 15px;
word-wrap: break-word;
}
This is the parent of the above one:
#PostBody {
border: #00C 1px solid;
width:80%;
background:#FFFFFF;
float:left;
}
and this ones are the CSS from the included file:
One div includes the one, just like the name says.
#FirstOne {
border: #000080 1px solid;
color: #000;
font-family: 'Courier New', Courier, Monospace;
font-size: 9pt;
}
#SecondOne {
background: #000080;
color: #fff;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: bold;
padding: 2px 5px;
}
I used this same structure in one blog, but instead of an include file I used data from the table, so i think the problem are from the CSS. This is the result i get. This Giang Div is totally adjustable to the screen size, but it stays up there instead of here the arrow points and here the include is printed.
Well...
The value 1 is returned because the include-statement was performed successfully.
If the included file doesn't contain any code that needs to run, you can use file_get_contents():
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= file_get_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
As a reference, if the include file does have code that has to be executed, use output buffering:
function get_include_contents($filename) {
if (is_file($filename)) {
ob_start();
include $filename;
return ob_get_clean();
}
return false;
}
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= get_include_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
Above code is taken from the PHP-manual (include-statement, example 6)
Instead of using incude try using file_get_content()
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div>";
$Return .= "<div id='PostText'>";
$Return .= file_get_content($row['PathFile']);
$Return .= "</div><div id='PostData'>";
I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.