que - Problemas con Interchange.js en la Fundación Zurb cuando las imágenes se cambian de tamaño dinámicamente por clase de PHP
que es un constructor en php (2)
No hay necesidad de intercambio de depuración, funciona bastante bien.
Primero, ¿ha incluido el archivo foudation.js antes de interchange.js (dependencia)?
Consejo para la depuración: intente con valores predeterminados / medios / pequeños y utilice diferentes imágenes (por ejemplo, diferentes rectángulos de color) para detectar cambios rápidamente.
Además, en su ejemplo, solo hay una ruta (ver más abajo) y tiene una consulta con nombre "predeterminada". ¿Cuál es el sentido de cargar la misma imagen dos veces? Es posible que desee que su tamaño predeterminado esté en src = "" y sus tamaños (generalmente) más grandes a partir de entonces?
Lo que hace el intercambio es dejar que src "(ej .: small.jpg)" se cargue como siempre (de ahí que se muestre sin js habilitado) y ENTONCES carga una imagen más grande dependiendo de la consulta-consultada / consulta-medio. Por lo tanto, quizás pueda generar todo el tamaño de su imagen al cargarla (sin necesidad de verificar el tamaño). Al menos, es la forma en que lo hago con 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)]">
Estoy construyendo un sitio receptivo usando la Fundación Zurb.
Tengo un script PHP que redimensionará y almacenará en caché una imagen usando gdlib si anexas una cadena de consulta con nuevas dimensiones en la URL. Por ejemplo, para cambiar el tamaño de una imagen a 300 px de ancho:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
También estoy usando algunas reglas de reescritura de HTACCESS para que esta URL sea bonita y evite tener una cadena de consulta. Entonces, esta URL da el mismo resultado que arriba:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
El archivo PHP realiza aritmética simple para restringir por ancho o alto, verifica si la versión redimensionada ya está en caché, si es así, si no, cambia el tamaño de las imágenes, la guarda usando imagejpeg y la genera con encabezado ("Tipo de contenido" : image / jpeg ");
También estoy usando la Fundación Zurb y quiero usar el javascript de intercambio así:
<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)]">
Sin embargo, esto no parece funcionar. Solo se muestra 300px para ambos puntos de interrupción. Después de muchas pruebas, está claro que solo está tomando lo que está en el atributo src. Las imágenes que pasan por el script de cambio de tamaño no funcionan. Esto es cierto incluso si debe usar la imagen de medio, que es la ruta directa de la imagen de tamaño completo.
Intenté depurar el intercambio javascript, pero no soy tan habilidoso en Javascript.
Cualquier ayuda o consejo sería apreciado. Alguien debe intentar usar imágenes de tamaño dinámico con PHP usando interchange.js en un sitio sensible.
Como puedo ver en la Zurb Foundation Github repo Issues puede haber un problema con la URL que contiene parámetros y su expresión regular