I have a gallery script written in PHP, which generates a gallery based on images stored in a given folder. This is working fine for a straight ahead gallery, but I would like to add an srcset value, which generates the gallery from images in a folder marked "big" for high definition screens.
I have tried to replicate the part of the code which generates the small images by including a variable called $imagesBig, but it's only echoing the final image in the folder for each picture generated.
The file names in each folder are identical, only the folder variable changes.
<?php
$rsContent = "rsContent";
$imgContainer = "imgContainer";
$directoryBig = "img/acts/".$category."/".$thisPage."/gallery/big/";
$imagesBig = glob($directoryBig . "*.jpg");
foreach($imagesBig as $imageBig);
$directorySmall = "img/acts/".$category."/".$thisPage."/gallery/small/";
$imagesSmall = glob($directorySmall . "*.jpg");
foreach($imagesSmall as $imageSmall) {
echo "<div class=" .$rsContent. "><div class=" .$imgContainer. "><img src=" .$imageSmall. " srcset='$imageSmall 1x, $imageBig 2x' alt=" .$thisPage. " /></div></div>";
}
?>
I'm hoping the final output will look like this:
<div class="rsContent">
<div class="imgContainer">
<img src="img/acts/theater/kikkerkusje/gallery/small/1.jpg" srcset="img/acts/theater/kikkerkusje/gallery/small/1.jpg 1x, img/acts/theater/kikkerkusje/gallery/big/1.jpg 2x" alt="kikkerkusje">
</div>
</div>
Thanks for any help.
The problem is that you have two completly separate loops, the 'big' loop doesn't actually do anything (the ; on the end of the foreach()) just iterates over the loop with no output.
You need to combine the two sets of results, this assumes that the list of images will appear in the same order in each directory (something a bit fragile - you may be better sorting the lists if this may be a problem).
First get a list of the big images and then when outputting the small images in a loop, pick out the matching big image (using $imagesBig[$index])...
$directoryBig = "img/acts/".$category."/".$thisPage."/gallery/big/";
$imagesBig = glob($directoryBig . "*.jpg");
$directorySmall = "img/acts/".$category."/".$thisPage."/gallery/small/";
$imagesSmall = glob($directorySmall . "*.jpg");
foreach($imagesSmall as $index=>$imageSmall) {
$imageBig = $imagesBig[$index];
echo "<div class=" .$rsContent. "><div class="
.$imgContainer. "><img src=" .$imageSmall
. " srcset='$imageSmall 1x, $imageBig 2x' alt="
.$thisPage. " /></div></div>";
}
Related
I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images
$count = 0;
echo " <div class=\"row\">";
while($row = $result->fetch_assoc()) {
$ext = $row['Extension'];
$ImageID=$row['ImageID'];
if(($count%3) ==0){
echo "</div>";
echo " <div class=\"row\">";
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}else{
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}
}
echo "</div>" ;
Image after link is clicked
<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";
$result = mysqli_query($conn,$query);
$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';
?>
I don't know what to do at this point, how can I provide that zoom in/out functionality?
First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.
Make two folders on your webservers:
images/
thumbnails/
Put your small images in "thumbnails" and large images in "images"
And if you need to, store the image-names in your database, so you can do something more like this:
echo '<img src="images/'+$imageName+'">'
If you want to, you can do an on-demand resizing of your images, using gd-lib.
The basic idea being, in pseudocode:
//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName
This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery
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.
I have the code to dump pics in a directory and produce the result in a feed like instagram, i just want it to open the image onto a page with css and area for the picture already plotted out. I just need a jumping off point to open the images individually.
I hope this helps:
<?php
$dest = "index.php?id=" . SHOWPIC . "&path=" . $path;
?>
<a href="<?php echo $dest; ?>">
<img alt="Photo" src="<?php echo $path;?>">
</a>
SHOWPIC here is a constant that contains an integer. index.php should have something like:
if($_REQUEST["id"] == SHOWPIC)
require_once "showpic.php";
$path in my example is meant to contain the path to the image displayed.
showpic.php will then read the contents of $_REQUEST["path"] and display the pic. That's also the place where you can add CSS or whatever you like to the site.
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>';
So let's say that I have a number of images on my server, uploaded by users. Each picture also has a row in the database containing information like filename, category, filesize, extension and location.
When I want to show these images I use a mysql_query and a while loop. This works, but the pictures all have different sizes and they show up next to each other or under each other which looks really bad.
Let's asume that I have 20 of these images, how can I show 5 images next to each other, 4 rows long???
Assuming a numerically indexed array of objects containing image data:
<div class="row">
<?php
// loop through all my images taking the index and image object
foreach( $images as $idx=>$image ) {
// If this isn't the 1st image & the modulus of 5 and $idx is 0, make a new row.
if( $idx > 0 && !(5%$idx) ) {
</div><div class="row">
}
// Print out the image
echo '<img src="' . $image->filename . '" />';
} ?>
</div>
The modulus is basically the remainder if you divide the first number by the second. Therefore when we've printed 5 images, 5/5=1 with no remainder, so we create a new row.
I believe that would create something like:
<div class="row">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
</div>
<div class="row">
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
<img src="img9.jpg" />
<img src="img10.jpg" />
</div>
Which could then be styled using CSS:
<style type="text/css">
div.row {
clear:left;
}
div.row img {
float:left;
}
</style>
When it comes to resizing the images, you have a 2 options:
The easy option: set the image width in the CSS (the height will scale accordingly). This is less than perfect and if the images are different aspect ratios (width vs. height), will still look messy.
Resize (and crop if necessary) using a PHP library such as GD or imagick (a PHP layer on top of imagemagick). Personally I prefer GD as it's packaged with PHP so it's got wider support. That said, imagick is quicker, simpler code, so it's up to you. This site gives a good comparison between the two for image resizing.
EDIT: in answer to your question, you'd need to do something like this to get the array of images:
<?php
// Build an array of images
$sql = 'SELECT * FROM images';
$result = mysql_query( $sql );
while( $obj = mysql_fetch_object( $result ) ) {
$images[] = $obj;
}
?>
pseudocode
$i = 0;
while($row = mysql_fetch_object($result) {
//displaying image
....
if($i % 4 == 0) {
echo '<BR>';
}
$i++;
}