I am using lightbox to show an image in php.
My current code:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" class="photo_frame photo_size" >
<br />
<?php
echo $res['title'];
?>
</a>
CSS and JS for lightbox have already been included. In the above code, $res['title'] and $res['path'] are being fetched from database.
If I click on the image or the text which is showing as $res['title'], lightbox effect is showing. The image is within the lightbox. Now I need the $res['title'] value also be displayed when the lightbox is opened along with the image.
How do I do that?
Just use the title parameter in the <a> tag, as mentionned in the Lightbox Documentation:
Optional: Use the title attribute if you want to show a caption.
You must add the title:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" title="
<?php
echo $res['title'];
?>
" class="photo_frame photo_size" >
</a>
You should be able to move all of your markup into a div. Add rel="lightbox" to that div, it should work. Although that depends on the lightbox library you are using.
Related
I'm stuck. Any help is appreciated.
Goal...
When in a Joomla content blog view I show an intro image, I want, on hover, to fade it to 20% and show the intro text, in black, on top of the intro image.
What I've done so far...
Alter the Joomla core file blog_item.php from
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
to
<?php echo '<div id="box">'; ?>
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
<?php echo '<div id="overlay">'; ?>
<?php echo $this->item->introtext; ?>
<?php echo '</div>'; ?>
<?php echo '</div>'; ?>
and added CSS for opacity and positioning.
The problem is... The div overlay hovers over the introduction-image-link. So it's no longer clickable.
My question... How can I give the div overlay the same href as the introduction-image?
Thanks for your help.
The simplest way that I can think of right away is to implement a click listener on the overlay div and take the user to the desired url using window.location
trying to insert an image into some php. This code pulls from the database thumbnail page to show an item's details. It works fine when it's text "see it in 3d view" but when I try to insert a premade image in that location instead (a button jpg, aka "img src="#"), I'm getting an error. How can I do this correctly? Still learning the ins and outs of php and html, they don't always play the way I expect them to. Thanks for any help.
echo ("<br><img src= \"");
echo ($thumbnail);
echo (" \"><br><br><a href = \"");
echo ($photo);
echo ("\"><b>See it in 360 view</b></a></div>");
echo ("<div id=\"info\"; style=\"width:45%\"><br><br><div class = \"date\">");
echo ($date);
echo ("</div><br>");
echo ("<div class = \"blurbs\">");
echo ($sub);
echo ("<br><br><br>");
echo ($desc);
echo ("<br><br>");
echo ($hist);
echo ("<br><br><br><b>Provenance:</b><br>");
echo ($prov);
echo ("<br><br><b>Construction Label:</b><br>");
echo ($labl);
echo ("<br><br><br><br><b>");
echo ($cNum);
echo ("</b>");
<img src="#"> would never work. src="#" is a shortcut for "current page". e.g. browsers will try to use the current page's URL as the source for the image, which means it'll be trying to load a bunch of HTML as if it was a jpg/gif/png image. Since html isn't any of those, it'll just be a flat-out "this image contains errors" error.
Whatever you're putting in $thumbnail needs to be a proper url, e.g.
<img src="kittens.jpg">
<img src="http://example.com/kittens.jpg">
<img src="data:image/jpeg;base64,<?php echp base64_encode(file_get_contents('kittens.jpg')); ?>">
I would start out with cleaning up your file and remove some of the unneeded overhead (I personally love to have my controllers (Which is generating the output for my view files)
What is the output of this PHP file and what did you expect it to be?
<br><img src="<?= $thumbnail ?>">
<br><br><b>See it in 360 view</b>
</div>
<div id="info" style="width:45%"><br><br><div class = "date">
<?= $date ?>
</div><br>
<div class="blurbs">
<?= $sub ?>
<br><br><br>
<?= $desc ?>
<br><br>
<?= $hist ?>
<br><br><br><b>Provenance:</b><br>
<?= $prov ?>
<br><br><b>Construction Label:</b><br>
<?= $labl ?>
<br><br><br><br><b>
<?= $cNum ?>
</b>
a note to this is that Short Open tag which is enabled by default from PHP 5.4)
You should also look into using div or p tags instead of all the line breaks (it makes it easier for you to make changes to later on)
I have built a site for someone else who will be updating it via a CMS (CushyCMS). They wanted a lightbox gallery included. I want to be able to allow them to upload a new image and for that image url to be copied into the a tag so lightbox works.
So far I am able to do that, but the client has to ensure the file names and format are exactly the same as what I have set them to in the php code. Is there a way to get the img url from the img tag (possibly identifying it using an id attribute) and put it directly into the tag?
Heres what I have so far:
<?php
$src1 = "images/test1.jpg";
$src2 = "images/test2.jpg";
?>
<a href="<?php echo $src1?>" data-lightbox="group-1">
<img class="cushycms profile" name="image1" id="slideshow_image" src="images/test1.jpg"/></a>
<a href="<?php echo $src2?>" data-lightbox="group-1">
<img class="cushycms profile" id="slideshow_image" src="images/test2.jpg"/></a>
Many thanks!
You can do it with jQuery:
<a data-lightbox="group-1">
<img name="image1" src="images/test1.jpg" />
</a>
<script>
var img = $('img[name="image1"]');
var imgSrc = img.attr('src');
img.parent().attr('href', imgSrc);
</script>
If you have multiple images and want to automate this you can use the map function:
<a data-lightbox="group-1">
<img name="image1" src="images/test1.jpg" class="slideshow" />
</a>
<a data-lightbox="group-1">
<img name="image2" src="images/test2.jpg" class="slideshow" />
</a>
<a data-lightbox="group-1">
<img name="image3" src="images/test3.jpg" class="slideshow" />
</a>
<script>
$(".slideshow").map(function() {
$(this).parent().attr('href', this.src);
});
</script>
Assuming you use jQuery somewhere there, you could/should use a lightbox plugin, like this one here:
http://www.jacklmoore.com/colorbox/
Using the xamples there, you would then use:
(http://www.jacklmoore.com/colorbox/example1/)
$('a.gallery').colorbox({rel:'group-1'});
which would result in a lighbox gallery showing on "click" on any anchor with class "gallery" while the gallery would show all the elements pointed by "href" from all anchors of that have class="group-1" (so each anchor would be
although you have to include some files for jquery and the lightbox plugin, I think it will make your life much easier in the end.
Also not sure what your php level is, but the example code you have there asks for:
<?php
$images = array(
'images/test1.jpg',
'images/test2.jpg'
);
?>
<?php foreach($images as $i => $url): ?>
<a href="<?php echo $url?>" data-lightbox="group-1">
<img class="cushycms profile" name="image<?php echo $i+1 ?>" id="slideshow_image" src="<?php echo $url ?>"/>
</a>
<?php endforeach; ?>
Just in case you got more images there.
I am using a wordpress theme that has a custom post type called "link" which simply produces a post where the title links to an outside link you specify. It also includes some text in the body of the post. I would like to also be able to display an image. Right now it is not showing the image.
Here is the code:
elseif ( has_post_format( 'link' )) {
if(get_post_meta($post->ID, '_format_link_url', true)!=''){
$link = get_post_meta($post->ID, '_format_link_url', true);
}else{
$link = '';
}
?>
<h2 class="entry-title">
<a href="<?php echo $link; ?>" target="_blank" title="Follow this link">
<?php the_title(); ?>
</a>
</h2>
<p>
Is there anything I can add to make it display an image as well as text?
Thanks!
I can't see anywhere on this example where you are using an tag to insert an image. The img tag has two required attributes, src and alt. Src is the path to your image, whereas alt is the alternate text for the image. So:
<img src="images/myImage.png" alt="This Is My Image"/>
Hope that helps!
I'm using Drupal 6.x. This is my code on my node-product.tpl.php template. I've created a custom jquery gallery for the products. It works great, but I'm just missing tool tips from my images (both large and small thumbnails). To upload images I'm using a CCK field named field_images. There I input the image titles when I upload the images. How can I add the tool tip code snippet to make it work?
<div class="product-large">
<img src="/sites/default/files/imagecache/360x280/<?php print $node->field_images[0]['filename']; ?>" />
</div>
<div class="product-small">
<?php
// get all images
foreach ($node->field_images as $images) {
?>
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['filename']; ?>" />
<?php
}
?>
</div>
Thanks much appreciated!
Chris
The "tooltip" is a result of the title HTML attribute. You'll want to add title="foo" to your img tag.
Perhaps:
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['data']['filename']; ?>" title="<?php print $images['title']; ?>"/> for the second image and similarly $node->field_images[0]['data']['title'] for the first.