问题
I'm building a responsive site using Zurb Foundation.
I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
The PHP file performs some simple arithmetic to constrain by width or height, checks if the resized version is already in cache, if so outputs it, if not, resizes the images, saves it using imagejpeg and outputs it with header("Content-type: image/jpeg");
I am also using Zurb Foundation and want to use the interchange javascript like so:
<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg"
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">
However, this does not seem to work. Only the 300px is shown for both breakpoints. After much testing it's clear that only what's in the src attribute is taking. The images passing through the resize script don't work. This is true even if it should be using the medium image which is the direct path the full size image.
I tried to debug the interchange javascript, but am not that skilled in Javascript.
Any help or advice would be appreciated. Someone must be trying to using dynamically resized images with PHP using interchange.js on a responsive site.
回答1:
There is no need for debugging interchange, it works pretty well.
First, have you included the foudation.js file before interchange.js (dependancy) ?
Tip for debugging: try with default/medium/small and use different images (ex: different color rectangles) to quickly notice changes.
Also, in your example, there is only one path (see below) and you're having a "default" named-query. What is the point of loading the same image twice ? You might want your default size to be in src="", and your (typically) bigger sizes thereafter ?
What interchange does is letting the src"(ex: small.jpg)" loads as usual (hence it's displayed without js enabled) and THEN loads a bigger image depending on the named-query/media-query. So perhaps you could generate all your image size on upload (with no check for size existance needed). At least, it's the way I do it with wordpress.
<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">
回答2:
As I can see on the Zurb Foundation Github repo Issues there may be a problem with url containing parameters and their regular expression
来源：https://stackoverflow.com/questions/17893133/trouble-with-interchange-js-in-zurb-foundation-when-images-are-being-dynamically