I have this JS code which works by using the onclick method and opens an image in a new window which is the exact size of the image.
I adapted it from the BolGallery script. but the bolGallery script parses this in PHP and is able to get the the 'title','width' and 'height' values dynamically. and also the 'ImageFile' value.
My question is, is there a way to get these with php?
Im not very knowledgeable with JS
function GalleryPopup(imageFile, width, height, title){
var html = '<title>' + title + ' - Click to close </title><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onclick=\"javascript:window.close()\"><img src=\"' + imageFile + '\" alt=\"Click to close\"></body>';
var popup = window.open(imageFile, '_blank', 'width=' + width+ ', height=' + height + ', status=no');
popup.document.write(html);
popup.focus();
}
alternatively, if you know of any other ways to achieve what i'm going for then feel free to tell me.
For Instance i dont know what to set the variable like:
$imagetitle =
Would that work?
i also have jQuery..
in jQuery you can get size of image with:
$('img').width();
$('img').height();
// this is used to grab the source file and title:
$('img').attr('src');
$('img').attr('title');
Related
I'll try to keep this simple and clear. I'm pretty new to using API's but I'm using the Flickr API to search for and display photos on my website based on a certain tag. For a simple, static web page this is quite simple and I've already got it working as intended. This is the jquery script I found to use:
$(function() {
var apiKey = 'MY_API_KEY_IS_IN_HERE';
var tag = '%23FFLIVE2014-09-03';
var perPage = '25';
var showOnPage = '6';
$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
'flickr.photos.search&api_key=' + apiKey +
'&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
function(data){
var classShown = 'class="lightbox"';
var classHidden = 'class="lightbox hidden"';
$.each(data.photos.photo, function(i, rPhoto){
var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
+ rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
var thumbPhotoURL = basePhotoURL + '_s.jpg';
var mediumPhotoURL = basePhotoURL + '.jpg';
var photoStringStart = '<a ';
var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
rPhoto.title + '"/></a>;'
var photoString = (i < showOnPage) ?
photoStringStart + classShown + photoStringEnd :
photoStringStart + classHidden + photoStringEnd;
$(photoString).appendTo("#flickr");
});
$("a.lightbox").lightBox();
});
});
Create a #flickr div on a page and load that script, photos tagged #FFLIVE2014-09-03 would be displayed, if there are any. My problem is that the site/page I want to show the photos on is dynamic with data generated from a database. So website.com/page.php is the single page, in the database is data for a certain date and a performance that happened on it (For a band).
So what I'm struggling with is how to dynamically edit the tags searched for in the script. With the above script placed in my page.php obviously page.php?id=1 and page.php?id=261 will show the same photos, because the tags searched will be the same when in fact they should be different, based on the date for the data.
So, is there some way to do this? Generate the correct date tag to search for based on the database data? I can generate the correct tag inside the PHP file itself quite easily, just echo the first part of the tag then the date. But how would I do that in relation to the javascript? I gather it is possible to use PHP within Javascript but that would be outside the database, so it wouldn't know what it was generating.
I hope that makes sense!
I have a vanilla flexslider installation on my site. The slider operates by cycling through list items in an unordered list. You can add captions simply by adding a caption container after the list item. This works well with hard coded images.
The problem I am facing is that my site has multiple sections, with a different slide show for each section. Instead of hard coding the li elements, I'm generating them with php, so that when a user visits a page, the php figures out which page the user is viewing, and passes that through to the slideshow. The slideshow then finds the proper image directory and loads all of the images in that directory whether there be two or twenty. It's much easier than hard coding each slideshow, and it works beautifully.
<?php
$dh = "image/slideShows/$slideShow/";
$images = glob($dh . "*.jpg");
foreach($images as $image){
?><li><img src="<?php echo $image;?>" alt="caption text" /></li><?php
}
closedir($dh);
?>
I need to get flexslider to read the alt text for each dynamically generated image, and then place it in a caption container:
<p class="caption">The alt text should show up here.</p>
I've tried using:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: "#slideShowContainer",
start: function(slider) {
$('.caption').html(this.alt);
},
});
});
and playing around with flexslider's current.slide to no avail. I've been searching on this all night and I can't seem to figure this one out. I'm hoping someone here can provide the missing link for me.
Thanks in advance.
EDIT: I figured this out, and it was seriously a matter of over-complication. All I had to do was call the EXIF data that I was using for the "alt" attribute inside of the caption. I have no idea why it took me so long to realize this. Thank you both for your help!
start: function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber + 1).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
},
before: function(slider) {
var slideNumber = (slider.currentSlide + 1);
var alt = $('.slides img').eq(slideNumber + 1).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
}
It sounds like you have only one .caption box? And you want its contents to change with each slide?
I would try something like:
before: function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
});
},
note that before runs at each slide transition, not just once like start
Edit
OP adjusted the above code (see comments below), but still has the "issue mentioned in the comment where the first image doesn't get a caption on it's second and subsequent scrolls"
Perhaps we should be using after instead of before? That way we don't need to do slideNumber+1 (since before was making this the previous slide.. You can perhaps remove the start function in favor of just doing this above the flexslider call
in $(window).load(function(){ or (document).ready(){:
var alt = $('.slides img').eq(0).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
and within flexslider()
after:function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
},
I'm working on a gallery that pulls up a full image inside a tooltip when hovering over thumbnails. The problem is, these full images commonly go outside the viewfinder. To remedy this, I'm moving the tooltip if the image will go outside the window boundaries, which requires immediately knowing the images dimensions (to avoid the tooltip jumping around).
However, the images take a bit to load (.gifs) so I can't wait on DOM in order to get the dimensions. So, I'm calling a PHP script to return the the image dimensions before they load.
The problem I'm having is that there's no response from my $.get call. I know the PHP script is working fine, but I'm not getting any data back from it through jquery. Any help would be greatly appreciated. Thanks!!
hover.js:
this.imagePreview = function(){
$("a.preview").hover(function(e){
var viewHeight = $(window).height() + $(window).scrollTop();
var viewWidth = $(window).width();
var xOffset=e.pageX+40;
var yOffset=e.pageY+40;
var url = 'http://mysite.com/i/' + this.href.slice(20);
var w = 0;
var h = 0;
$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
$.get("getDimensions.php/?img=" + url, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
});
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
$('#img').load(function() {
if((e.pageX+img.width)>viewWidth) { xOffset=e.pageX-img.width-70; }
if((e.pageY+img.height)>viewHeight) { yOffset=e.pageY-img.height-70; }
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
});
},
function(){
$("#preview").remove();
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
getDimensions.php:
<?php
list($width, $height, $type, $attr) = getimagesize($img);
echo json_encode(array("w"=>$width,"h"=>$height));
?>
$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
when u append the img which have src prop,that will not fire load event any more.That's the problem is.
Have you tried..
var rand = Math.floor(Math.random()*11);
$.get("getDimensions.php/?img=" + url + "&r=" + rand, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
},"json");
( Also, I would strongly recommend .ajax over .get)
Can you view what you are getting back from getDimensions.php (in firebug)?
My guess is that jQuery has no way of knowing that the data returned from getDimensions.php is JSON (as opposed to plain old text), and it isn’t trying to parse it.
What's the value of data (if you print it out to the console)?
If this is the problem, you can solve it by adding this line to the PHP script, before echo:
header('Content-Type: application/json');
I created an image sliding gallery where when an user presses the left/right arrows one image slides out and the new image slides in. It worked good.
All the related images and descriptions went in my PHP file. Now I want to have some new images and I found that adding and modifying this content took me longer than it should.
So I decided to remove all the image markup and have a JSON file for the images:
Here is the code that I am using in order to retrieve the data and to inject it in the DOM
$.getJSON('data.txt', function(data) {
var len = data.length, i; for (i = 0; i < len; i += 1) {
$("#image_container").append(
'<div class="image_frame"><img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '">
<div class="caption"></div><div class="innercaption"><p><span>' + data[i].category +
'</span> |' + data[i].title + '</p></div><div class="caption2"></div><div class="innercaption2">
<p><span>Description</span> | ' + data[i].description + '</p></div></div>' );
};
});
It runs at the start of document ready - But now the sliding arrows do not work, but no errors are generated.
My guess is that it would be because the content is created at the same time as the slider code. So, they can't see each other.
Is there a way to fix this (maybe run the getJSON in a way that the slider code can see it)?
I've an img element with dynamically changing image. I always want to show this image in its full dimension.
So, I think, I've to dynamically change width and height attributes in img tag.
How can I do this in php or javascript?
Just leaving off the width and height attributes (and styles) should do. If you need to know it afterwards you can grab it from the computed CSS.
Couldn't you do without the width and height dimensions? As far as I've seen if you don't define the width and height the browser displays the entire full size image. Most modern browsers that is.
Assuming that you care about alt, height, and width attributes (you should), reading the image properties from a javascript array may be a good fit for you. Here's an example in jQuery inserting a random image, you could swap the random image logic out for any kind of slideshow, etc that you'd like for rendering.
$(document).ready(function() {
var imageArray = new Array ();
imageArray[0] = new Array ( "jungle.jpg", "http://rmportal.net", "Jungle", "400", "300");
imageArray[1] = new Array ( "mountain.jpg", "http://rmportal.net", "Mountain" , "350", "290");
imageArray[2] = new Array ( "ocean.jpg", "http://rmportal.net", "Ocean" , "442", "530");
var max = imageArray.length;
var num = Math.floor((Math.random() * max));
var hstring = "<a href='" + imageArray[num][1] + "'><img src='" + imageArray[num][0] + "' alt='" + imageArray[num][2] + "' height='" imageArray[num][3] + "' width='" + imageArray[num][4] + "' /></a>"
$('#my-image').html(hstring);
});
If you’d prefer to keep the width and height attributes in your HTML, then in PHP you want the getimagesize method in the GD library.
If the page loads with the image’s width and height included as attributes in the source,
use removeAttribute('width') and 'height' the first time you change its source.
If you don’t want the page to ‘collapse’ during a slow download, preload the image and change the src after img.complete is true, which is right away if it is cached, or after the image onload fires.