I am using the jQuery Hovercard plugin (here) and trying to impliment it with user images pulled from Facebook with their php sdk, here is the code I am using to display the Hovercard:
<?php
$friends = $this->facebook->api('/me/friends');
foreach ($friends["data"] as $value) { ?>
<label id="demo-facebook" data-hovercard="<?php echo $value['id'] ?>">
<img src="https://graph.facebook.com/<?php echo $value["id"] ?>/picture" alt="<?php echo $value["name"] ?>" />
</label>
<?php }
?>
The problem I am having is that the Hovercard will only show for the first users image displayed, after that no Hovercard will show when the image is moused over ?
You should change the CSS selector "demo-facebook" from an id to a class. I haven't used HoverCard before, but that seems like it would be the problem.
An ID specifies one specific element of a page, whereas a class can be re-used on multiple elements.
Also, I think it would be easier to just echo the HTML instead of having a <?php echo $value; ?> everytime you have to insert a PHP value. You could just do echo "<img src='$value'>"; instead of <img src="<?php echo $value; ?>" />. Just seems like it would be easier that way.
Related
<?php foreach($works as $work) : ?>
<?php echo Asset::img('project-icons/icon/$work->cover_img', array('class'=>'img-responsive', 'alt'=>'...')); ?>
<?php endforeach; ?>
I am using FuelPHP to build a portfolio website. PHP v5.6
This is the "works" section where images and details of a "work" are fetched from database. Using foreach loop. I want to get the "cover_img" (which is the image name), inside the Asset::img(..)
How to do this? what to put in place of $work->cover_img?
Edit: I was able to get the result by using this:
<img src="<?php echo Uri::base(false); ?>/assets/img/project-icons/icon/<?php echo $work->cover_url; ?>" class="img-responsive" alt="..." />
Can this be achieved by using Asset::img() instead of Uri::base()?
Can't you just do:
<?php
echo Asset::img('project-icons/icon/'.$work->cover_img, array('class'=>'img-responsive', 'alt'=>'...'));
?>
...?
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)
Main Question:
Does an echo output differently inside a switch than on its own?
--
I don't think this is anything too involved, but it's certainly causing a little bit of headache for me!
To start with something simple, I'm able to show the Joomla full article image like this:
<img src="<?php echo htmlspecialchars($images->image_fulltext); ?>" />
I then wanted to expand this, and add a lightbox to the image, which turned into this:
<a href="<?php echo htmlspecialchars($images->image_fulltext); ?>" data-lightbox="image">
<img src="<?php echo htmlspecialchars($images->image_fulltext); ?>" />
</a>
The lightbox works fine.
However, then I only wanted this lightbox to apply to certain menu IDs (I have a News section in multiple languages, and so want to only apply the hyperlinks when certain pageIDs were being viewed).
I decided to make a switch (simple enough!)
<?php
$app = JFactory::getApplication();
$menuID = $app->getMenu()->getActive()->id;
switch ($menuID) {
case '168':
case '231':
echo
"<a href='".htmlspecialchars($images->image_fulltext)."' data-lightbox='image'>
<img src='".htmlspecialchars($images->image_fulltext)."' />
</a>";
break;
default:
echo
"<img src='".htmlspecialchars($images->image_fulltext)."' />";
break;
}
?>
The problem is that the switch is changing the output of src.
Outside of switch: /armouredshielding/images/news-events/website-screenshot.jpg
Inside switch: images/news-events/website-screenshot.jpg
surely this isn't the way switches work is it? It's still using an echo command, so the output should be exactly the same?
Any help is greatly appreciated!
I prefer something more like this:
$pagesToLight = array (168,231);
if(in_array($menuID, $pagesToLight)){
echo "<a href='".htmlspecialchars($images->image_fulltext)."' data-lightbox='image'>
<img src='".htmlspecialchars($images->image_fulltext)."' />
</a>";
} else {
echo "<img src='".htmlspecialchars($images->image_fulltext)."' />";
}
I'm have a wordpress installation where i have 2x custom fields, that both store images (or rather the urls for the images).
I then have a div that i want to display the images in. but i want to display the first image, then have some nice buttons that will scroll to the next image.
My code so far is below:
<div>
<?php
$front_cover = get_post_meta($post->ID, 'front_cover', true);
$back_cover = get_post_meta($post->ID, 'back_cover', true);
$artwork = $front_cover;
if ($back_cover === '') {
echo '<img src="'.$artwork.'" />';
} else {
echo '<img src="'.$artwork.'" />';
?>
<div class="artwork_controls">
Previous
Next
<span class="sliderPagination">1 of 3</span>
</div>
</div>
<?php } ?>
As you can see. my If statement checks if the back_cover has any content... if it doesn't it displays the front_cover only.
If the back_cover does have content it should display the front cover and then the buttons that the user clicks to load up the back cover.
My thinking was that i could get the 'previous' and 'next' buttons to dynamically change the $artwork variable, but i don't believe that's possible as the PHP would have already been processed?
This code could be completely wrong, but hopefully you can see what i'm trying to do?
<div>
<?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
<?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
<?php $artwork = $front_cover; ?>
<?php if ($back_cover === '') { ?>
<img src="<?php echo $artwork; ?>" />
<?php } else { ?>
<img id="imgA" src="<?php echo $artwork; ?>" />
<img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
<div class="artwork_controls">
<span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
<span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
</div>
<?php } ?>
</div>
One way would be to do AJAX calls and fetch images upon clicking the "Previous" and "Next" buttons.
However you can just put all your images in the final html and do all the rest with javascript and some css.
So if you just put the two images in the html, lets say they have ids "front-image" and "back-image" so you've got this
<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>
Notice the style="visibility: hidden". From than on you can have onClick handlers on your Previous and Next buttons which just set the visibility of the two images.
clickHandlerPrev() {
document.querySelector("#front-image").style.visibility = "";
document.querySelector("#back-image").style.visibility = "hidden";
}
clickHandlerNext() {
document.querySelector("#front-image").style.visibility = "hidden";
document.querySelector("#back-image").style.visibility = "";
}
Then your buttons would look like this
Previous
Next
Though if I'm getting your goal right, I think your buttons are better named simply "Front cover" and "Back cover" since you're not iterating over lots of images, but switching just those two.
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.