I have a simple jquery cycle gallery populated by PHP. I would like to add an
"onclick" event corresponding to each image, revealing a higher resolution jpeg.
I would like to just put some inline javascript like so:
print('<div class="bigimg"><img onclick="javascrpt:load wrapper2 with (\''.$lrg_images.$file.'\')" src="' . $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");
...so each enlarged image is bound to it's cycle gallery counterpart.
Here is the meat of what I have so far.
//directory containing large images
$lrg_images = './images/images_lrg/';
//directory containing medium images
$cycle_images = './images/images_med/';
function getPictures() {
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
print('<div class="bigimg"><img src="' . $cycle_images . $file . '" class="change" align="right"></div>'."\r\n");
}
}
<!-- container for cycle gallery -->
<div id="feature_gallery"><?php getPictures(); ?></div>
<!-- container for enlarged image -->
<div id="wrapper2"></div>
Thanks and let me know if you need anything clarified.
The jQuery Facebox plugin will be helpful to you.
You can have it bind to your elements so that when they are clicked, it opens. There are examples of this on the homepage.
Related
How to display a placeholder image if there's no image set up in WordPress? The picture is displayed by the $property_image var. It is a featured image from a custom post (not a WordPress original one).
It is defined by the code below, displays the featured image of the post if set up, if not, only shows the alt tag content ("Upcoming picture..."):
$property_image = dreamvilla_mp_get_device_image($property_ID);
Below my code from a WordPress theme:
$html .= '<div class="property-list-list property-listing-list-full">
<div class="col-xs-12 col-sm-4 col-md-4 property-list-list-image">
<a href=' . esc_url(get_permalink($property_ID)) . '>
<img '. $property_image . ' alt="Upcoming picture..." class="img-responsive">
</a>
' . $featured_proeprty_label . '
' . $featured_proeprty_label_icon . '
' . dreamvilla_mp_agent_favorites_property_icon($property_ID) . '
</div>
I'd place this:
if( empty( $property_image ) ) {
$property_image = 'src="your_fallback_image"';
}
directly after:
$property_image = dreamvilla_mp_get_device_image($property_ID);
What to be used to determine if the variable is empty depends on what is stored in the variable.
Directly before the img tag, you could insert this:
<?php
if($property_image == '') {
$property_image ="scr='http://placehold.it/300x200/f0a'";
}
?>
It checks whether that variable is empty and if yes, puts a links to a placeholder image into it, including the src attribute.
Need help!
I am creating an online portal for which I am displaying images as categories using PHP in grid format. I am displaying images from a folder.
What I am trying to do is create modal for images so that when I click on a particular image, the image Modal opens and displays that particular image in large size with navigation buttons so that I can navigate forward and backward to another image.
Here's what I have till now to just display images using php:
<?php
$cols = 4;
$colCtr = 0;
if($colCtr %$cols == 0)
echo "<tr><td colspan='2'></td></tr><tr>";
$folder = "./upload";
$results = scandir('./upload/');
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_file($folder . '/' . $result)) {
echo '<td>
<a href="'.$folder . '/' . $result.'" target="_blank""/><img src="'.$folder . '/' . $result.'" target="_blank" alt="..." style="margin-left:50px;margin-bottom:27px;width:289px;height:190px;border: 2px solid black;" class="w3-hover-opacity hover-shadow cursor">
</td></tr>';
}
}
$colCtr++;
echo "\r\n";
?>
Thanks for your help!
You can use a lightbox javascript plugin to do that. Like: http://dimsemenov.com/plugins/magnific-popup/
Try this js plugin. It is easy to use is simple. http://sachinchoolur.github.io/lightGallery/
I am trying to develop a unique layout for my posts in my Wordpress theme for mobile devices. I am not sure how I should refer to a certain page width in PHP.
I have come up with the following code but it does not seem to work.
<?php if( (width == 320) && has_post_thumbnail()) { ?>
.
.
.
} else {
.
.
.
}
Please let me know your ideas.
Regards
I have an angular app that will display some images. I am opening a prettyPhoto ajax window and passing the pathname to the URL. My script is loading the image fine, however, it isn't displaying the image how prettyPhoto traditionally displays a photo.
What do I need to do so it behaves like it is displaying a photo? i.e: has the fullscreen button, resizes the lightbox to the photo etc.
Is that even possible?
I am opening the lightbox via:
$scope.openLightbox = function()
{
if (typeof $.prettyPhoto.open !== "function")
{
$.fn.prettyPhoto({
social_tools:false,
deeplinking: false,
keyboard_shortcuts: false
});
$.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
return;
}
$.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
}
$scope.currentFile would be something like: data/39/my_image_name.jpg
and I am parsing the PHP like so:
$path = base64_decode($_GET['path']);
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $path);
$mimeExt = explode('/', $mime);
if ($mimeExt[0] == 'image')
{
echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
}
elseif ($mimeExt[0] == 'video')
{
}
finfo_close($finfo);
Like I said above, the image is displaying just fine, I just want it to be displayed with the standard prettyPhoto image behavior. I understand this may not be possible.
EDIT
So turns out I didn't need AJAX afterall:
$scope.openLightbox = function()
{
if (typeof $.prettyPhoto.open !== "function")
{
$.fn.prettyPhoto({
social_tools:false,
deeplinking: false,
keyboard_shortcuts: false
});
$.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
return;
}
$.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
}
and finally my php which I am outputting the image directly to the browser so prettyPhoto thinks it is just loading an image
<?php
require("../config.php");
require("../connect.php");
session_start();
if (isset($_SESSION['ds_level']))
{
$path = base64_decode($_GET['path']);
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $path);
$mimeExt = explode('/', $mime);
if ($mimeExt[0] == 'image')
{
header('Content-Type: image/' . $mimeExt[1]);
echo file_get_contents($path);
}
elseif ($mimeExt[0] == 'video')
{
//do other stuff to display video
}
finfo_close($finfo);
}
else
{
//-- no access
}
?>
What do I need to do so it behaves like it is displaying a photo? i.e: has the fullscreen button, resizes the lightbox to the photo etc.
Is that even possible?
Yes, it is possible. You need to create a dedicated directive, as specified in this Gist:
.directive('prettyp', function(){
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({deeplinking: false, social_tools: false});
}
})
To apply it, specify rel="prettyPhoto" in the anchor, like so:
<a prettyp ng-href="{{image.url}}" rel="prettyPhoto[main]" target="_blank" title="{{image.title}}">
HOW IT WORKS
The directive looks for a rel attribute starting with prettyPhoto, and applies the prettyPhoto magic to it.
EXAMPLE
I made a Plunk you can play around with: check the Plunk
IN YOUR CODE
To apply the directive in your code, you could replace:
echo '';
with:
echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
EDIT AFTER CHAT SESSION
As your images are protected with .htaccess, you have opted to work with a base64 version of your image, and why not?
However, it seems that if you wait until the user clicks the 'view' button in your app, it takes too long to go fetch the protected image and encode it, before passing it on to prettyPhoto:
I recommend you go fetch your image before the user clicks the view button, when the user selects the image in the list.
The long process of:
make an ajax call to php server;
have php app fetch image;
have php app encode image;
have angularjs/javaScript app store the base64 string
can then be done automatically, preventively, in the background.
The user experience would then be optimised.
So when the user does click the view button, the base64 version of the image can be passed to prettyPhoto straight away, without any server call: this would produce the same result as displayed in the plunkr I provided, when the button is pressed.
<?php
$i = 0;
$page = get_the_content();
$doc=new DOMDocument();
$doc->loadHTML($page);
$xml=simplexml_import_dom($doc);
$images=$xml->xpath('//img');
foreach ($images as $img) {
list($width, $height, $type, $attr) = getimagesize($img['src']);
if ($height > 149 ) {
echo '<img src="' . $img['src'] . '" alt=" ' . $img['alt'] . ' - funny and hot pictures" title=" ' . $img['title'] . ' - funny fail picture dump" onerror=\'this.style.display="none" \'><br>';
$i++;
if ($i == 3 ) { break;}
}
else
{
// don't display
}
}
?>
I replaced the "<?php the_content(); ?>" piece of code with the one above. It's supposed to strip out all of the text in my post and just leave the images which it does nicely. But when I embed a video the php breaks. How would I allow posts to show youtube videos?
You should look into using custom fields:
http://codex.wordpress.org/Custom_Fields
There is a great plugin that creates good admin control panels for them too:
http://wordpress.org/extend/plugins/advanced-custom-fields/
You could use a custom field to specifically put a video into the page.
Is there a particular reason you want to strip the text out of the post? - e.g. could you just not put text in the post at all? - or could the text be put into the excerpt instead, or into a custom field so that you don't have to over complicate the output code?