I have a grid of thumbnails that when clicked on I want to load an overlay on the page showing the full size image and the contents of a text file as a caption.
Something like
<image src="thumbs/1001.jpg"> would just load the image, but I want to load the image in a light box sort of view and also load the contents to "desc/1001.txt" into a caption (not necessarily a <caption>) below the image.
I don't want it to reload the page if that can be avoided. If it helps, the images, thumbnails, and description all match the pattern above, or I also have a CSV file in the format of 1000,"Description of the picture" if that is simpler.
If you use something like https://lokeshdhakar.com/projects/lightbox2/#getting-started this should be fairly easy.
Your PHP code would look something like this:
<?php
$photos = [1000,1001];
foreach ($photos as $photo) {
$description = file_get_contents('desc/' . $photo . '.jpg');
echo '' . $photo . '';
}
?>
Related
I have the following code for a gallery. When the thumbnail is clicked, I would like to open the big image in another window (which it does) and then be able to navigate to the next image in the new window, but in order to do this, I need to strip the .jpg off the filenames so that I can just '+1' to the filename, as they are sequentially numbered.
For example, files are numbered 001.jpg, 002.jpg, 003.jpg etc.
I currently have:
echo '<p>basename=' . basename($i) . '</p>';
Which give the name of the file with .jpg extension, for example basename=001.jpg.
Then I have :
$image = basename($i); // to give the variable $image
$img = str_replace('.jpg',$image, ''); //to take off the .jpg extension
but the output I expect, 001, doesn't echo. It just has nothing... img=
echo '<p>img=' . $img . '</p>';
What am I doing wrong? Can anyone point me in the right direction?
Many thanks, Kirsty
Try this
$YourPicture = 'cat.jpg';
$without_extension = pathinfo($YourPicture, PATHINFO_FILENAME);
result will be
cat
Using the code below with the Sphider search engine, Sphider will display an image in search results - if the html page and jpg share the same name (i.e) page14.html, and page14.jpg.
1) Without knowing the name of the image, how could the code be modified so that the first of 2-3 jpg's is displayed from the html page returned in search results ?
<?PHP
$url_path = "http://www.webpage.com/"; // The url to indexed pages.
$url_ext = ".html"; // The file ext. of indexed pages.
$image_path = "../"; // Path to image folder.
$image_ext = ".jpg"; // The file extension of images.
$image = str_replace("$url_path", "$image_path", $url);
$image = str_replace("$url_ext", "$image_ext", $image);
if (file_exists($image)) { // Do nothing
} else { $image = $image_path . "ICS" . $image_ext; } ?>
<img src="<?PHP print $image ?>" align="left" style="margin-right:10px;" />
Or,
2) How would I modify the above php code to display the images below in search results - without renaming all the images ?
I have many gallery pages with hundreds of the following html image links;
<img SRC="chair_0.jpg">
<img SRC="table_0.jpg">
<img SRC="bed_0.jpg">
In my case, all our webpage images have the same ID as the end of each page.
Following is an example of how our pages look like: www.mywebsite.com/category/sub-category/etc/details.php?category=6&subcategory=s&sc=180&productid=98
The pictures are located in another path, and share the same last digits (i.e 98) as web page.
Following is an example of picture folder: www.mywebsite.com/admin/picures/
In addition, all pictures have an extra "p" at the front and "_full" at end of the digits, as following example "p98_full.jpg", p109_full.jpg" or "p3_full.jpg".
Following method worked for me. You will need to past this on sphider/templates/standard/search_results.html line # 76, modify it a bit to match your setting and see if it works... (You do not need to add a url link to your site to this code, this should work as is)
<?PHP
$url_ext = ".php"; // The file extension of indexed pages.
$image_path = "../admin/pictures/"; // Path to image folder.
$pic_name = "p"; // Alphabet before image, if any.
$page_end = Substr ($url2, strrpos($url2, "=")+1); // Isolate digits or alphabets starting from end of page.
$image_ext = "_full.jpg"; // The file extension of images.
$image = $image_path . "$pic_name$page_end" . $image_ext; // Select isolated digits or alphabes.
if (file_exists($image)) { // Do nothing
} else { $image = $image_path . "ICS" . $image_ext; } ?>
<img src="<?PHP print $image ?>" alt="" align="left" style="margin-right:10px; border:0;" />
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.
I am trying to display some images in my wordpress site. I am trying to make the background div and image via style=""
So when I do this:
<?php
if(has_post_thumbnail($property->ID)){
$image_url = get_the_post_thumbnail($property->ID,array(300,220),array('class' => "post_thumbnail"));
}else{
$image = $image_url = '';
}
?>
<div class="property_photo" style="background-image:url('<?php echo $image_url;?>') no-repeat;">
</div>
The photo is not displaying anymore and it's printing ') no-repeat;"> where the image should display. When I use a variable without an "_" in the name, it doesn't print anything. So to avoid that I tried $image = $image_url = ''; to get around that.
Is this is a simple syntax problem or is there something in the php that is causes this? It doesn't seem like syntax because when I use other variable it does not do this.
Your get_the_post_thumbnail() function is returning HTML, not a URL. You need to either change the function to only return a URL (or use a different function which does that), or change your HTML to put the image inside the div instead of setting it as a background image.
I have a slideshow set up with Magic fields like the code below, but
now I need each image to have a seperate link. How can I set this up?
I just can't think how I can add this to the code below, I appreciate
any help anyone can offer me.
<div id="slider">
<?php
$images = getFieldOrder('slideshow_slide');
if(is_array($images)){
foreach($images as $image){
echo get_image('slideshow_slide',1,$image);
}
}
?>
</div>
Hooray MagicFields! <3
There are two ways to get an image in MagicFields.
Method 1 will return a full image tag:
echo get_image('slideshow_slide');
Method 2 just returns the url of the image:
echo get_image('slideshow_slide',1,1,0);
In order to generate a link to your full-size image, you'll need to construct an anchor tag using the second method. Maybe something like this:
$image_path = get_image('slideshow_slide',1,1,0);
echo 'Insert link text or thumbnail here';
You might need to modify the above to work with your foreach loop, but that's the basic idea.
Update:
Here's what you need to do. Create another duplicateable text field, called image_url. This field will hold the link for your image. Each image will need a corresponding url. This loop should do what you want:
if(is_array($images)){
foreach($images as $image){
$image_url = get('image_url',1,$image);
echo "<a href='" . $image_url ."'>" . get_image('slideshow_slide',1,$image) . "</a>";
}
}