asked on

How to display multiple images coming from JSON array in Ajax Success function

I am storing image names in an array from DB and then encode it with json encode function to receive it in my ajax success method:

Here is the code"

$sql_gallery = "SELECT * FROM map_projects_gallery ";		
$gallery_result = mysqli_query($conn, $sql_gallery);
while( $gallery_row = mysqli_fetch_assoc($gallery_result) )
{					
$gallery_image_name[] = $gallery_row["img_name"];			
}		

echo json_encode(array("map_gallery" =>$gallery_image_name ));

Open in new window

Note: In ajax success function it returns all the image names. Now I want to display all images in a div and then later display them in a slider.

And here is my Code of jQuery Ajax

jQuery.ajax({
	url:"project.php",
	type: "POST",	
	data:  {"country_id":country_id,"lang_name":langname_val,"node_id":node_id,"fullurl":'<?php echo base_path();?>'},
	dataType: "json",								
	success: function(data)
	{
		alert(data.map_gallery);
		jQuery('#project-list').html(data.message1);  
	        jQuery('#paginations').html(data.message_2); 
		  
		
		  ///jQuery('.pr-cont-gallery').html('<img src=files/'+project_details.project_image+' width=200px>');	  
		  
		  jQuery('.pr-cont-gallery').append('<img src="' + data[0].map_gallery + '" />');

		  
		  data.forEach(function (data) {
				jQuery('.pr-cont-gallery').append('<img src="aaaaa.jpg" />');
		   });
	},
  });

Open in new window

Problem: I am unable to display all images separately in a div. Need help to fix this issue

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Yuri Boyz

ASKER

Yes it works. Now I want to add slick slider which will display one image at a time but provides next and previous buttons to view other images.

So where can I add the slick html. Can I add it in my Ajax success function in foreach loop or can I add html where I am saving the filenames in an array.

Need some code example. Thanks for ur help.

Chris Stanyon

I don't know slick slider, so can't give you a specific answer. If you know the HTML structure that you need, then you should be able to dynamically build that from within the AJAX success handler

Yuri Boyz

ASKER

thanks