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.
Related
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
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 have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!
Hi i am trying to get an image to display when a result is picked from a data base this is my code below:
$box .= '<div style="margin-top:10px;height:120px;"id=\"Video\">
<br/>
<div style="border-style:solid;border-width:1px;border-color:#00000;width:400px;float:right;"id=\"Title\">'.$row['title'].'</div>
<div style="width:220px;height:150px;float:left;border-style:solid;border-width:1px;border-color:#000000;" id=\"VideoImage\">"
<img class="partimg1" src="classroom/images/'.$row['media_id'].'.jpg" /></div>
<div style="height:50px;width:400px;float:right;padding:2px;margin-bottom:5px;" id=\"Blurb\">'.$row['blurb'].'</div>
<div style="height:21px;width:152px;margin-top:45px;margin-left:7px;background:url(images/bg_top_img2-09.jpg) repeat-x;color:#ffffff;padding-left:2px;float:left;border:1px solid #000000;position:relative;border-radius:15px;text-align:center;" id=\"Downloads\"> Download </div>
</div>';
the line with in the middle is where the image should be the .$row['media_id']. this will be a value from the database it will only be a number so for example 1 up to 50 and in the images folder the images are named 1 to 50 and they are all JPG is there something that i have missed because i have used this before and it worked.
all that displays on the screen is a broken image link like when the web page cannot find the image in the folder.
any help would be much appreciated.
You break the src link.
src=\"classroom/images/'.$row['media_id'].'.jpg\"/>
As you use simple quote ' for string delimiter, you don't need to escape double ones "
<img class=\"partimg1\" src=\"classroom/images/"'.$row['media_id'].'".jpg\"/>
Should be
<img class="partimg1" src="classroom/images/'.$row['media_id'].'.jpg" />
You also need to fix all your id attributes