Como obtener las imágenes de un campo de texto con jQuery
No se si en alguna ocasión te has visto en la necesidad de tener que capturar todas las imágenes que haya dentro de un post de WordPress o cualquier CMS montando una galería, carrousel o slider con ellas.
En este artículo vamos a ver como recoger o obtener todas las imágenes que hay dentro de una cadena con jQuery. Pensándolo a nivel de CMS, obtendriamos de la base de datos el campo descripción o contenido donde dentro haya imágenes.
En el ejemplo que vamos a ilustrar no estamos recuperando la descripción o contenido de ningún CMS, sino que tenemos una cadena de texto e imágenes como la siguiente:
$texto = '<h3>Texto con imagenes dentro de una cadena</h3><p>titulo 1</p><img src="images/200.jpg" /><p>titulo 1</p><img src="images/201.jpg" /><p>titulo 1</p><img src="images/202.jpg" />"';
En el <body> vamos a añadir el siguiente contenedor o div que contendrá el contenido o descripción de forma oculta y añadimos un link que tras pulsarlo recuperaremos las imágenes que hay dentro empleando para ello jQuery.
<div class="texto" style="display:none;"><?php echo $texto; ?></div> <p><a href="#" id="getimages">Coger imagenes</a></p> <div class="images"></div>
En el <head> de la página añadiremos la librería jQuery y los scripts que obtendrán las imágenes de este contenido.
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
var imagenes = new Array();
$(document).ready(function() {
$('#getimages').click(function(){
$.each($('.texto img'), function(i, l){
imagenes[i] = 'imagen_'+i;
$(".images").append('<img data="'+$(l).attr('src')+'" src="'+$(l).attr('src')+'" /><br/>');
});
alert('Hay '+imagenes.length+' imagenes dentro del texto. Puedes verlas recogidas al final');
});
});
</script>
Al pulsar en el link o botón con id=»getimages» guardamos en un array declarado previamente las imágenes que encontremos y además las añadimos a otro contenedor para visualizarlas.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Deja una respuesta