I can not find an answer(that works) to this anywhere on the web.
I am trying to get Lightbox to load images from a directory as they will be frequently updated.
If anyone can correct what I'm doing wrong, or has a solution using either PHP or a hidden div populated automatically by a specific directory it would be greatly appreciated.
Here is what I have come up with but is not seeming to work;
<?php $dirname = "img/love/"; $images = glob($dirname."*.jpg"); foreach($images as $image) { echo '<img data-lightbox="love" src="'.$image.'" /><br />'; } ?>
and here is my test page: http://knowledgeoverfame.com/tslp/leet/alt/index.html
I didn't find any similar questions here with an answer to this but if i may have missed it please enlighten me :)
Thanks!
Try using scandir() to get an array of your image files.
Example:
<?php
$images = scandir($your_folder);
foreach ( $images as $key => $filename ) {
if ( $key > 1 ) { //ignores the first two values which refer to the current and parent directory
echo '<img data-lightbox="love" src="'.$your_folder."/".$filename.'" /><br />';
}
}
?>
for reference: PHP scandir()
What you want to do - use lightbox to display images from a folder - is a problem which has been solved lots of times with varying degrees of complexity. If you do a google search for something like "php image gallery" you will find sample scripts. I did just this about a year ago and after some experimentation I chose Minigal Nano as it was a powerful script but simple enough for it to be quite easy to see how it worked and then rework for my own use. I also found this an effective way to learn php.
This script will pull the images from a directory. I used it with fancybox but you can modify to fit your needs.
<?php
$directory = 'yourDirectory/gallery/thumbs'; //where the gallery thumbnail images are located
$files = glob($directory."/*.{jpg,jpeg,gif,png}", GLOB_BRACE);
natsort($files); //sort by filename
?>
<?php
for($x = 0; $x < count($files); $x++){
$thumb = $files[$x];
$file = basename($thumb);
$nomargin = $x%4 == 0?" nomargin":"";
$title = htmlspecialchars($file);
?>
<div class="thumbs fancybox<?= $nomargin ?>" style="background:url('<?= $thumb ?>') no-repeat 50% 50%;">
<a rel="group" href="yourDirectory/gallery/<?= $file ?>"></a>
</div>
<?php
}//end for loop
?>
Related
So i have a set of 20 images in a set, all labeled as dog. So dog01, dog02, dog03, etc. I'm using this code to pull those out of a directory and display them 5 to a row, in 4 rows like so.
dog01 dog02 dog03 dog04 dog05
dog06 dog07 dog08 dog09 dog10 (etc.)
I"m using this code to load the images from a directory, and it is loading them in order.
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
if(($i+1)%5 == 0) echo '<br />';
}
?>
However, I want to see if there is a way to get it so that if one of the dogs is missing from the directory, it instead loads a filler in its place, and continues to load the others in sequence. So if dog03 is missing, it would look like this:
dog01 dog02 filler dog04 dog05
It would show filler, and continue on the sequence. I'm genuinely not sure if I can achieve this in php. If someone knows what approach I need to take here, that would be appreciated. I should note that the filler image is in another directory called "fillers/".
Thanks in advance.
You have two ways of approaching this I think. The first is by not worrying about it in php, and loading the filler image as background image. Normally the image will be loaded over the filler image, but if the image does not load, the filler image stays visible.
The other way is by testing if the file exists.
As background image:
.deck {
//whatever you had here
background-image: url( "/filler/filler.png" );
}
You might need to make container divs around your images, and put the css on that instead. Please note that if no explicit width or height is set, this will not work, as the background-image does not assign any width or height to the element it is attached to.
By testing beforehand:
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
if( file_exists( $image ) ) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
} else {
echo '<img class="deck filler" src="/filler/filler.png" alt="This image does not exist." title="This image does not exist.">';
}
if(($i+1)%5 == 0) echo '<br />';
}
?>
This method might not work if you are running php in safe mode.
I'm working on a website with an image grid with infinite scrolling. For an image grid I'm using Final Tiles Grid Gallery plugin, which has an infinite scrolling feature and works as follows:
It requires PHP file with html structure of elements that should be added when users reaches certain part of the web page
Part of get-images.php:
<div class="tile">
<a class="tile-inner" href="photos/1.jpg">
<img class="item" src="images/3235535.jpg" />
</a>
Now, when certain part of page is reached the plugin calls ajax function to add more pictures. What I'm trying to achieve is automating the process of adding the code to the PHP file. I have too many images to add them all manually. I have very little knowledge in PHP and I found this little piece of code on stackoverflow to help me out:
<?php
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/<?php echo $images[$i]; ?>" alt="" />
Now, how do I combine those to achieve my goal? Also, I am planning to append the link to every picture added and the link should correspond with the name of the image (For example the name of image is "12345", then the link should be "abc.com/12345." I know I am asking too much and the second part of my question is completely on me to figure out but I will appreciate any help. Thanks.
Try it:
<?php
$count = 20;
function fetch_rand()
{
$images = glob('images/*.*');
$rand = array_rand($images);
return $images[$rand];
}
$my_list = array();
$i = 0;
while($i<$count)
{
$select = fetch_rand();
if(!in_array($select,$my_list))
{
array_push($my_list,$select);
$i++;
}
}
//print_r($my_list); //just for check
foreach($my_list as $image)
{
$image_link = explode('.',end(explode('/',$image)));
$image_link = $image_link[0];
//echo $image_link; //just for check
?>
<div class="tile">
<a class="tile-inner" href="abc.com/<?php echo $image_link; ?>">
<img class="item" src="<?php echo $image; ?>" />
</a>
</div>
<?php
}
?>
it will select random file from your image directory and never show duplicated.
Note: change $count value to your prefer value and image directory address in fetch_rand function.
in php i want to ask how to get images one by one from folder directory and display in the jquery slider i have tried this php code by it's not working as i want?
<ul class="jcarousel-list">
<li class="jcarousel-item">
<?php
$directory = "data/uploads/topslider/";
if (glob($directory . "*") != false)
{
$filecount = count(glob($directory . "*"));
}
else
{
}
$files_index = glob("data/uploads/"."top"."slider/*.*");
for ($i=0; $i<$filecount; $i++)
{
$num2 = $files_index[$i];
?>
<img src="<?php echo $num2;?>" width="50" height="50" alt="" /> <?
}?></li>
</ul>
i want display like this:
Image1 Imag2 Image3......and So On from single folder or directory
There are four main things to check:
Is your $directory path correct relative to your current working directory in PHP? You can determine your current working directory by doing a temporary echo getcwd();. It needs to return the parent directory of your "data" folder for your code to work.
Is the data folder accessible from the current page on the web? e.g. if you manually remove the page from the URL (say, index.php) and add data/uploads/topslider/someimage.png where someimage.png is an image you know exists in your topslider folder, does the image load properly in the browser? If not, you'll need to update the way you build the src attribute in your img tag(s).
You're only adding one jcarousel-item for all your images, which doesn't seem right to me. I'm guessing you're expected to add a list item for each image.
You don't need to call glob twice just to ascertain how many files you have to work with. Just do a foreach statement once:
echo '<ul class="jcarousel-list">';
foreach(glob($directory . '*') as $filename) {
echo '<li class="jcarousel-item"><img src="'.$filename.'" width="50" height="50" alt="" /></li>';
}
echo '</ul>';
I am building a Wordpress website. Please don't mind that I'm not working on a local or testing server, or my code. It's messy at the moment while I try to figure out this programming bit. By going to my website, you will see a row of images along the top, which is within a jcarousel.
It works, but if you hit next until you get to the "portrait" photo, there is a gap. The gap is because I have to set a width in pixels within my HTML or CSS for the carousel to work correctly. If set to auto, the carousel collapses. Makes sense to me, but it's frustrating that I cannot work around that. I want the "landscape" and "portrait" photos to have an identical height of 427, but the width I want it to self-adjust to the actual image size.
So I think I understand this bit after playing around for 3 days - I cannot tell you how many carousel codes I've used. Originally I thought that was the problem, and some were. I found out, widths of each image slide are set within the JavaScript, so if I gave it a width of 640, I would get the same result as I am getting now.
My first question is this:
I'm calling my images from a directory on my server, written specifically for Wordpress (author). Here is the code:
<?php
$uploads = wp_upload_dir();
if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
echo '<ul>';
foreach($images as $image) {
echo '<li><img src="';
echo $uploads['baseurl'].'/picture-atlantic/'.$image;
echo '" alt="" width="auto" height="auto" /></li>';
}
echo '</ul>';
?>
As you can see, it's calling from the picture-atlantic directory and displaying it within an unordered list, which is required for some reason with my jcarousel.
Finally: how can I use this same code to get my images, but also display them at their actual sizes? In the code above, if I define the width and height, it does it for all the images. However, as I mentioned before, I have portrait pictures that use different dimensions. I found this code: erikastokes.com/php/how-to-get-image-size-with-php.php, but I'm not sure how to implement it in my existing code.
Could someone please help me rewrite it?
You could set the width of the image to 100% and add a style to reposition portrait images at top: -50%;, but you will not be able to see the entire image if it is in landscape.
<?php
$uploads = wp_upload_dir();
if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
echo '<ul>';
foreach($images as $image) {
$myimage = $uploads['baseurl'].'/picture-atlantic/'.$image;
$size = getimagesize($myimage);
$top_50 = '';
if($size[1] > $size[0]) {
$top_50 = 'style="position: realative; top: -50%;"';
}
echo '<li><img src="';
echo $uploads['baseurl'].'/picture-atlantic/'.$image;
echo '" alt="" width="100%" height="auto" '.$top_50.'/></li>';
}
echo '</ul>';
?>
Welp, I read that I cannot use getimagesize if I'm already using php to dynamically display my images. I ended up settling with uploading images through Wordpress, within an unordered list, and placing my carousel markup in the post loop. It works just fine now.
Oh, I read on http://www.css-tricks.com that Wordpress adds the image attributes automatically, and that is what solved the image width problem while displaying landscape and portrait style photos at 100% across the screen.
To those who are trying to do a similar task, don't use jj nexgen gallery for inserting your images. jj nexgen gallery is a great plugin, along with the others associated with it. It just won't work for what I was trying to do because it doesn't add the attributes to the image. I would download their wordpress plugins if you aren't trying to do this, so I'm guessing the majority of you.
Thanks again for the replies.
I am working on a little project and I need to display the author's image for each author in my database. peep the code below:
--THE QUERY--
$getboth_sql = mysql_query(
"SELECT lyrics.lyrics_id, lyrics.lyrics_title, lyrics.lyrics_text,artists.artist_nane,artists.artist_id
FROM lyrics,artists
WHERE lyrics.artist_id = artists.artist_id
ORDER BY lyrics.lyrics_title");
while ($both = mysql_fetch_assoc($getboth_sql)) {
$lyrics_id = $both[lyrics_id];
$lyrics_title = $both[lyrics_title];
$lyrics_text = $both[lyrics_text];
$artist_name = $both[artist_nane];
$artist_id = $both[artist_id];
?>
<div class="artimg"><img src="images/artists/<?php echo $artist_name;?>.jpg" height="50px" width="50px"/></div>
<?php
}//END While
The above code work but if I have not saved an image in the 'artists' directory no image show up for that artist.
<div class="artimg"><img src="images/artists/<?php echo $artist_name;?>.jpg" height="50px" width="50px"/></div>
QUESTION: What is the BEST way to display a default image if the specified on is not found.
I have been playing around with the empty and file exists functions but i haven't gotten it right. Please Help.
PS I'm not a pro if this question seems stupid!
There are many ways to do this.
<?php
if(file_exists("images/artists/$artist_name.jpg"))
$fileName = "$artist_name.jpg";
else
$fileName = "default.jpg";
?>
<div class="artimg"><img src="images/artists/<?php echo $fileName;?>" height="50px" width="50px"/></div>
Disk Access = slow
You have a couple of options. One is to check that the file exists each and every time you need to display it. Unfortunately, this is less than ideal because disk reads can be a performance bottleneck. It's not a tenable solution if you're serving up hundreds of page loads a minute. In high-performance environments you want to avoid as many file stats as possible:
$img_dir = '/path/to/artist/images';
$expected_file = $img_dir . '/' . $artist_name . '.jpg';
$img = file_exists($expected_file) ? $artist_name : 'default';
Hard-code the names into your code
Another, if you have a small number of artists whose images you need to display is to hard-code in the names for the images you have:
$authors = array('Bill Shakespeare', 'Douglas Adams', 'Ralph Ellison');
$img = in_array($artist_name, $authors) ? $artist_name : 'default';
Of course, this isn't particularly helpful because then you'll need to edit your code each time your catalog of artist images changes.
The best idea ...
The preferred option in this instance would be this:
Since you're already hitting the database to get the artist records, store the relevant image filename in a database column of the artists table. That way you can avoid the superfluous disk access.
This method allows you to retrieve the filename from the database with your original query. If the field is empty you'll know to display the default image instead.
try
if ( !file_exists( 'images/artists/' . $filename ) ) {
$artist_name = 'holderthumbnail';
}
have holderthumbnail.jpg in your 'artists' directory
Code :
<?php
if(file_exists("$your_image.jpg")) $filename = "$your_image.jpg";
else $filename = "default.jpg";
echo "<img src='$filename'/>";
?>
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.src='Default.jpg'" width="100" height="120">
Try this way: For Laravel:
<?php
$image = parse_url($user->image);
if(isset($image['host'])){
$image= $user->image;
}
else if($image==null){
$image= Request::root().'/uploads'.'/subsystems_icons/'.'democp.jpg';
}
else {
$image= Request::root().'/uploads/'.$user->image;
}
?>
<div class="">
<img class="image" style="width: 100%; height: 300px; object-fit: contain ;"
src="{{$image}}">
</div>