I'm currently building a small PHP photo gallery system using lightbox.
My code:
<div class="col-7 offset-2 p-2">
<img src="uploads/entrance.jpg" alt="">
<?php foreach ($photos as $photo){?>
<a class="gone" href="<?php echo $photo->file_path('uploads',$photo->filename)?>" data- lightbox="gallery"><img src="<?php echo $photo->file_path('uploads',$photo->filename)?>" alt=""></a>
<?php } ?>
</div>
I wish to show the first indexed/id photo as the thumbnail/cover image. Once the user wishes to view the gallery, they can click the image and lightbox launches allowing a preview of the photos drawn from SQL.
How do I achieve this?
This may be quite an amateur question, but I'm meddling around with what I've learnt from youtube :P
Related
First time here and hoping someone can help me. Apologies if I've done anything wrong with regards to posting this question here...
I've created a slide show (using PHP) based on 8 images loaded from an SQL database (PHPMyAdmin)
I want to be able to click on any one image to open a new page which will then show a larger version of the same.
I've scoured the internet and various other forums but struggling to find any help.
Please let me know if you require any further information prior to providing an answer. Any help will be hugely appreciated.
<div class="mySlides">
<div class="numbertext"><?php echo $i . " / 8" ?></div>
<a href="http://stu10.lccwebtest.co.uk/getimage.php">
<img src="<?php echo $product["Product_Image"];?>" style="width:100%">
</div>
My suggestion would be to end the anchor tag after the image (so the image is part of the link), set it's target attribute to _blank (so it opens in a new page), and finally pass some reference to getimage.php (so it can load the larger image). For example:
<div class="mySlides">
<div class="numbertext"><?php echo $i . " / 8" ?></div>
<a href="http://stu10.lccwebtest.co.uk/getimage.php?id=<?php echo $product["ID"];?>" target="_blank">
<img src="<?php echo $product["Product_Image"];?>" style="width:100%">
</a>
</div>
I've made an assumption on what your primary key is for "products", replace "ID" in my example above with the correct primary key.
Based on further discussion we established that getimage.php has no other function other than to show the larger image. So in that case how about doing away with it and adding the larger image url directly to the anchor as in the below:
<div class="mySlides">
<div class="numbertext"><?php echo $i . " / 8" ?></div>
<?php $largerImageUrl = $product["Product_Image"]; //replace the code here with your actual larger image url for this slide ?>
<a href="<?php echo $largerImageUrl;?>" target="_blank">
<img src="<?php echo $product["Product_Image"];?>" style="width:100%">
</a>
</div>
That reduces a lot of extra work. The only times you'd need a script in the middle would be if the larger image location was a secret or you wanted to somehow record the number of times it was viewed or you wanted to display some other html around the image. In other words, if it had some other function.
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
In my project's homepage there must be some images, these must link to other pages. Now, I want to manage these links in an automatic way using PHP. The only idea I came up with is to make a form and insert the images into some buttons and make their background invisible.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>FRESH ALBUMS</h3>
</div>
</div>
<div id="myline"></div>
<div class="row">
<div class="col-md-3">
<img src="contentimg/abbeyroad.jpg" height="200px" width="200px">
<div class="caption">
<h4>Beatles</h4>
</div>
<p> test</p>
</div>
<div class="col-md-3">TEST2</div>
<div class="col-md-3">TEST3</div>
<div class="col-md-3">TEST4</div>
</div>
</div>
This is the HTML at the moment. I just want to know if there are better ideas, options and if it will stay responsive. Thanks in advance.
I do not understand exactly what you are asking, but I cannot leave comments so I will try to answer what I think you are asking.
For the HTML part, you don't need a form with buttons, you can make hyperlinks out of the images instead, and the PHP can get the images to match the hyperlinks when it sends the page to your users browser. The PHP code would look like:
echo "
<a href='".$newPageLink."'>
<img src='".$imageLocation."' width='100px' height='100px'>
</a>";
Where $newPageLink is a variable in your PHP script that holds the path information for your hyperlink, and $imageLocation is the path information for where the image is stored.
All you need is a foreach or while loop to go through all of the images that you want on the page and also all of the pages that each image should link to. If it is always a manageable and unchanging list, you could store the values in an array in your script. For larger lists, or lists that are dynamic/always changing you might need to use a MySQL database table to store the image and hyperlink information.
I am doing a photo gallery with php, and my main page is a gallery with all thumbnail images. If you click on any thumbnail, it will link to another page with the original size image (like google images does). I do that with an hyperlink that contains an image inside :
<a href='".$row['image']."' class='image' title='".$row['title']."'>"."<img src=".$row['thumb']." class='thumb'/> </a>
Then if the user is now in the redirected page showing the big image selected, how can I do it so that if the user clicks on top of the big size image then it will be redirected to the main page with all the thumbnails?
<a href="<?php echo $row['image'];?>"class='image' title="<?php echo $row['title'];?>">
<img src="<?php echo ['thumb'];?>" class='thumb'/>
</a>
If you are able to link to a detail page using <a href, why are you not able to do the same from the detail page?
considering you are on listing page, say listing.php and images are listed from database. You can loop through the images as given below.
<a href="detail-image.php?id=<?php echo $image_from_database['id'];?>" class='image' title="image title">
<img src="<?php echo $image_from_database['thumb'];?>" class='large'/>
</a>
So, on clicking you will be redirected to detail-image.php where you can get the id using PHP $_GET/$_REQUEST
and then fetch the big image from database and show it. There you can do same to link to the listing page
<a href="listing.php" class='image' title="image title">
<img src="<?php echo $image_from_database['large_image'];?>" class='thumb'/>
</a>
Look I don't know exactly what's the problem,
but I think there wrong in your code,
must be like it,
<a href="<?php echo $row['image'];?>"class='image' title="<?php echo $row['title'];?>">
<img src="<?php echo ['thumb'];?>" class='thumb'/>
</a>
!! The page must be "Something.php"
I'm trying to accomplish something like this website
http://ilpvideo.com
As you can see any video that you click on,
takes you to that same page. The only difference is the video playing.
I'm trying to do the same for my website. here is my code
//index.php
<div class="thumbnail">
<a href="video.php?id=video1">
<img src="/local/images/vid_01.jpg">
</a>
</div>
<div class="thumbnail">
<a href="video.php?id=video2">
<img src="/images/vid_02.jpg">
</a>
</div>
<div class="thumbnail">
<a href="video.php?id=video3">
<img src="/images/vid_03.jpg">
</a>
</div>
This part here I can't quite understand yet.
When a video is clicked on index.php
I should send the user to video.php
and inside that iframe element it should only send the video id.
ex:
video1 is click then iframe should be src="media/video1.mp4"
video2 is click then iframe should be src="media/video2.mp4"
video3 is click then iframe should be src="media/video3.mp4"
//video.php
$id = $_GET['id'];
<section id="video-php">
<iframe src="media/<?php echo $id?>.mp4" allowfullscreen></iframe>
</section>
Updated my question.
I have another question.
How can make it so that when a unique video ID
is click, to also included the video title. Is there such tag in php
to make this happen?
You forgot the "echo" before your variable $id. I think that's why it didn't work.
You should use the video tag provided by HTML5. It allows you to insert a video content into your web page.
<?php
$id = $_GET['id'];
?>
<video width="320" height="240" controls>
<source src="media/<?php echo $id; ?>.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>