Need help!
I am creating an online portal for which I am displaying images as categories using PHP in grid format. I am displaying images from a folder.
What I am trying to do is create modal for images so that when I click on a particular image, the image Modal opens and displays that particular image in large size with navigation buttons so that I can navigate forward and backward to another image.
Here's what I have till now to just display images using php:
<?php
$cols = 4;
$colCtr = 0;
if($colCtr %$cols == 0)
echo "<tr><td colspan='2'></td></tr><tr>";
$folder = "./upload";
$results = scandir('./upload/');
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_file($folder . '/' . $result)) {
echo '<td>
<a href="'.$folder . '/' . $result.'" target="_blank""/><img src="'.$folder . '/' . $result.'" target="_blank" alt="..." style="margin-left:50px;margin-bottom:27px;width:289px;height:190px;border: 2px solid black;" class="w3-hover-opacity hover-shadow cursor">
</td></tr>';
}
}
$colCtr++;
echo "\r\n";
?>
Thanks for your help!
You can use a lightbox javascript plugin to do that. Like: http://dimsemenov.com/plugins/magnific-popup/
Try this js plugin. It is easy to use is simple. http://sachinchoolur.github.io/lightGallery/
Related
Update: After looking at my HTML code in browser I figure out I need to only run the SQL code inside php just once in foreach loop and the images will be displayed horizontally. I was wondering how do I make that sql code run only once in that loop?
When I write the below code inside foreach ($ffs as $ff) {
Code:
echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
So when this code is inside that foreach loop the images displays in vertical and I want my images to be displayed in horizontal (one next to other). But, if I remove that code from foreach and put it outside foreach code the image are displayed horizontally and works fine. I have tried CSS to display the image horizontally, but it only works if I remove that code from foreach. For some reason the above code (In foreach) somehow forcing the images to display in vertical, so no matter what I do it displays in vertical (the images).
I can't put my code outside foreach. I know I can use foreach to loop through my SQL code and it works fine, but the thing is I want it to work like first load images then first row only from sql, then 2nd image and 2nd row from sql and for that to make it work the only way is to put inside foreach my sql code, so it loads one at a time or else if I put it outside foreach It will load all the data of sql at once (1 row to 9 let's say) then all the images which makes no sense. I am storing my images in my hosting website files.
My question is how do I force my images to display horizontally one next to other?
My code:
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', '1');
require "navigationbar.php";
require "testing.php";
?>
<html>
<head>
<link rel="stylesheet" href="userprofilestyl.css">
</head>
<body>
<hr>
<?php
global $username;
//username to get data of specific user
$username = $_SESSION['name'];
//to get image by username
$image = "images/$username";
global $increaseForText;
$increaseForText = 0;
function listFolderFiles($dir, $username, $increaseForText)
{
//getting images
$ffs = scandir($dir);
unset($ffs[array_search('.', $ffs, true)]);
unset($ffs[array_search('..', $ffs, true)]);
// prevent empty ordered elements
if (count($ffs) < 1) {
return;
}
$column_count = 0;
$sql = "select username_for_info, _name, _desc
from info_desc where username_for_info = '$username'";
try {
require "testing.php";
$stmt = $conn->prepare($sql);
$stmt->execute();
$Data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo '<div class="image-container">';
foreach ($ffs as $ff) {
//select data from database
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
global $string_arr;
$string_arr = (explode("/", $string));
$sav;
$sav = '<li>' . $ff;
global $sa;
$sa = "$ff";
if (is_dir($dir . '/' . $ff)) {
listFolderFiles($dir . '/' . $ff, $username, $increaseForText);
}
//printing image
if (is_file($saving)) {
echo '<img src="' . $saving . ' " width="100" height="100" alt="Random image" />';
}
//printing text
echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
$increaseForText++;
}
} catch (PDOException $e) {
echo '{error":{"text":' . $e->getMessage() . '}}';
}
echo '</div>';
}
listFolderFiles($image, $username, $increaseForText);
?>
</body>
</html>
Add this to your css file:
.image-container{
display:inline-flex;
flex-flow:row;
}
This will change the flow of every element inside the div with the class "image-container" from vertically to horizontally
Foreach has nothing to do with making the images display vertically, there should be something wrong with the HTML or CSS. Make sure your tags are closed, such as your p and li tags.
There are alot of ways to make the images display horizontally, it would easier if you can send a jsfiddle or a code snippet.
But try this on .image-container:
display: flex !important;
flex-flow: row;
I'm doing a PHP assignment having a very basic knowledge of PHP.
I'm looping through a list of pictures from S3, but after looping through I want a selected picture to be opened on click. I'm clueless on how it will proceed further.
I have a product.php page which has to redirect to single .php.
PHP is server side language that send html tags to render in browser side, so you can use client side languages (exp: javascript) to handle it.
You can do it with HTML: Anchors aka Links:
$images = [
'a.jpg',
'b.jpg'
];
echo '<ul>';
foreach($images as $image) {
echo '<li>';
echo '<a href="single.php?image=' . $image . '">';
// small preview-images could be prefixed with 'thumb_' . $image
echo '<img src="' . $image . '" width='100'/>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
In single.php you will get the clicked Image with $_GET['image']
I have an < iframe > and when I "click" to one of the files .html that I show with this list it was appearing in this < iframe >. How can I do that?
I need to change the src that has the < iframe >. Now the only thing that it does is to open to a new page. Thank you.
<iframe id="probando" src="<?php echo $url; ?>" scrolling="auto" height="700" width="800" marginheight="0" marginwidth="0" name="probando"></iframe>
Since I can do that it changes the src that has the giving click. the only thing that it does is to open to a new . Thank you.
This is my code.
$directorioInicial = "./";
$rep = opendir($directorioInicial);
while ($arc = readdir($rep)) {
if ($arc != '..' && $arc != '.' && $arc != '') {
echo "<a href=" . $directorioInicial . "/" . $arc . " target='_blank'>" . $arc . "</a><br />";
}
}
closedir($rep);
clearstatcache();
If i understand you correctly, i think you need to change the target of the link to "_self" instead of _blank.
See this page for more info
<?php
$i = 0;
$page = get_the_content();
$doc=new DOMDocument();
$doc->loadHTML($page);
$xml=simplexml_import_dom($doc);
$images=$xml->xpath('//img');
foreach ($images as $img) {
list($width, $height, $type, $attr) = getimagesize($img['src']);
if ($height > 149 ) {
echo '<img src="' . $img['src'] . '" alt=" ' . $img['alt'] . ' - funny and hot pictures" title=" ' . $img['title'] . ' - funny fail picture dump" onerror=\'this.style.display="none" \'><br>';
$i++;
if ($i == 3 ) { break;}
}
else
{
// don't display
}
}
?>
I replaced the "<?php the_content(); ?>" piece of code with the one above. It's supposed to strip out all of the text in my post and just leave the images which it does nicely. But when I embed a video the php breaks. How would I allow posts to show youtube videos?
You should look into using custom fields:
http://codex.wordpress.org/Custom_Fields
There is a great plugin that creates good admin control panels for them too:
http://wordpress.org/extend/plugins/advanced-custom-fields/
You could use a custom field to specifically put a video into the page.
Is there a particular reason you want to strip the text out of the post? - e.g. could you just not put text in the post at all? - or could the text be put into the excerpt instead, or into a custom field so that you don't have to over complicate the output code?
I have a simple jquery cycle gallery populated by PHP. I would like to add an
"onclick" event corresponding to each image, revealing a higher resolution jpeg.
I would like to just put some inline javascript like so:
print('<div class="bigimg"><img onclick="javascrpt:load wrapper2 with (\''.$lrg_images.$file.'\')" src="' . $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");
...so each enlarged image is bound to it's cycle gallery counterpart.
Here is the meat of what I have so far.
//directory containing large images
$lrg_images = './images/images_lrg/';
//directory containing medium images
$cycle_images = './images/images_med/';
function getPictures() {
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
print('<div class="bigimg"><img src="' . $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");
}
}
<!-- container for cycle gallery -->
<div id="feature_gallery"><?php getPictures(); ?></div>
<!-- container for enlarged image -->
<div id="wrapper2"></div>
Thanks and let me know if you need anything clarified.
The jQuery Facebox plugin will be helpful to you.
You can have it bind to your elements so that when they are clicked, it opens. There are examples of this on the homepage.