I added in single.php the following code to preview in top of the post the featured image
<?php the_post_thumbnail('artist-top-thumb', array('class' => "img-responsive")); ?>
and now I want to wrap the image with the link of the original image, so when the user clicks on the image the lightbox will show the full image. I looked the half internet but I cant find a solution (or I searched with wrong terms :) )
How can I do that? Is it possible?
Thank you :)
not too sure what you mean by light box but to return the url and open in a new window:
<?php
$pic=wp_get_attachment_url( get_post_thumbnail_id($post->ID);
?>
<img src="<?php echo $pic;?>"
Related
I want to credit the author of a few the photos on my website in the title tag. I just added the fields in the admin sections using the instructions given here and this works fine.
Now i want to display that information in the title tag of a photo but that photo is set as a background image and therefor im not able to add a title tag to it and thus the info isnt showing. It is said as a background-image because it sometimes has an extra layer (partially) on top of it.
<figure
style="<?php echo "background-image:url('".$snakeImageUrl."'); background-size:cover;"; ?>"
title="<?php echo get_post_meta($post->ID, 'be_photographer_name', true); ?>
<?php echo get_post_meta($post->ID, 'be_photographer_url', true); ?>">
</figure>
How am i still be able to achieve this result?
I think you're going to have trouble here, I don't know of properties being able to be attached to content that's delivered via CSS which is what the style attribute within with figure selector is.
Can you edit the template? If so, why not have the image as a HTML image element and then use CSS and position:absolute on the content that you want placed over the background image?
I have problem to call image with link.
i implementing url management in Yii. it working fine. but. when call image from database. image and link ie if i hover on the image. pages gets render. so dont want to render or refresh the page. i added the code following please where i did mistake. please suggest me how to call the image only
<?php $image = '<img class="img-responsive" src="'.Yii::app()->baseUrl.'/img/'.$small_recipe.'" />';
echo CHtml::link($image, array('name'=>$reciep_name,)); ?>
Try this way
$imghtml=CHtml::image('gallery/'.$data->gallery'.jpg', $data->picturenumber.'.jpg');
echo CHtml::link($imghtml, array('view', 'id'=>$data->id));
I have a image gallery with 15 pics, it shows the first image in normal size and the rest are thumbs on the bottom, when you click the thumbs it replaces the normal size image with that one, and if you click the normal sized image it shows on a lightbox style popup with the image description.
This gallery layout is called Galleria and its part of the SIG Pro joomla plugin:
http://demo.joomlaworks.net/simple-image-gallery-pro
The image descriptions for each image are shown on the popup, but I would like to remove this behavior and show the description below the normal sized image.
My question is regarding PHP, I'm very noob at this.
For what I figured out I can print all the thumbs descriptions with this:
<?php foreach($gallery as $count=>$photo): ?>
<p class="sigProGalleriaTargetTxt"><?php echo $photo->captionDescription; ?></p>
<?php endforeach; ?>
But what I want to print is only the description of the image that is selected.
I tried this:
<p class="sigProGalleriaTargetTxt"><?php echo $gallery[0]->captionDescription; ?></p>
But this only prints the first image description, because it has the value 0 (first image).
I see that I need to increment the value of $gallery according to the selected image.
How can I achieve this?
Here is the complete php file:
http://codepad.org/MlPbgPzl
Thank you,
What about using som javascript/dom to set the captions? its a bit of a hacky but, i would try to have an onClick Event which calls a function to apply the description.
in the thumbs sections something like:
<span class="sigProLinkWrapper">
<a onClick="setDesc('<?php echo $photo->captionDescription; ?>');" href="...
and for the description:
// leaving the <?php tag like this, so you get always the first description
// but adding an id tag
<p id='photoDescription' class="sigProGalleriaTargetTxt">$gallery[0]->captionDescription; ?></p>
and finally replacing it with some javascript (or jquery if youre using that)
function setDesc(photoDesc)
{
var descContainer = document.getElementById("photoDescription").innerHTML= photoDesc;
}
maybe it helps :)
I don't know if anybody's going to know about pretty photo, but it's a image gallery box that opens images in a window like facebook.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Basically a user will click on a persons profile and it will open a page in this pretty photo box. It is capable of loading images and pages but when i do this i get an error saying "image can not be loaded make sure the path is correct."
I'm trying it with google for now to see if i can get the page to open but it won't even work with google. Does anyone know where i'm going wrong and can anyone show me where to fix this?
<?
echo
"<img width=90px height= 90px src=\"data/photos/{$chat['id']}/_default.jpg\"/>"; ?>
've tried putting the image path in the hyperlink?
<?php
echo "<img width=90px height= 90px src=\"data/photos/{$chat['id']}/_default.jpg\"/>";
?>
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!