How to load image from mysql database in NivoSlider

Question

How can load image from MySQL database in NivoSlider. I can't seem to find a solution to this. I would like to create a jQuery image slider. I need to dynamically load images stored on my MYSQL database.

Any suggestions would be appreciated.

Here is my script:

</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;" align="center">jQuery Nivo Slider Demo</h1>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> 

 <?php
 $connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server
$db = mysql_select_db("user"); // Selecting Database
$sql = mysql_query("SELECT * FROM images ORDER BY image DESC LIMIT 10") or die(mysql_error());
        while($row = mysql_fetch_array($sql)){
            $image = $row['image'];
            $id = $row['id'];
            $pic = "upload/$image";
            if (file_exists($pic)) {
                print '<img src=\"upload/$image\"/>';
                $i++;
            }
        }
    ?>

</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.nivo.slider.js"></script> 
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script> 
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Updated code:

<?php
 $connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server
$db = mysql_select_db("user"); // Selecting Database

 $sql = mysql_query("SELECT * FROM images ORDER BY image DESC LIMIT 10")or die(mysql_error());
        while($row = mysql_fetch_array($sql)){
            $image = $row['image'];
            $id = $row['id'];
            $pic = "upload/".$image";
            if (file_exists($pic)) {
                print '<img src=\"upload/$image\"/>';
                $i++;
            }
        }
    ?>

What have you done ? You have to make a request to populate your markup but we can't help you if you do not provide your code. — Mehdi Brillaud, Apr 29 '15 at 09:45
It seems ok beside $pic = "upload/$image"; Try $pic = "upload/" . $image; (And tell us more about what is not working) — Mehdi Brillaud, Apr 29 '15 at 10:03
please check updated code....still nothing loading from mysql — Safin Chowdhury, Apr 29 '15 at 10:14
if(!empty($pic)){ echo ''; (and remove this $i++, you don't need it in a while) — Mehdi Brillaud, Apr 29 '15 at 10:19
now getting this '; } } ? in slider when loading...nothing display from mysql — Safin Chowdhury, Apr 29 '15 at 10:31
$sql = mysql_query("SELECT * FROM images ORDER BY image DESC LIMIT 10")or die(mysql_error()); while($row = mysql_fetch_array($sql)){ $image = $row['image']; $id = $row['id']; $pic = "upload/".$image"; if(!empty($pic)){ echo ''; } } — Safin Chowdhury, Apr 29 '15 at 10:32
http://pastebin.com/2dPBr6kT I added a var_dump, try this and tell me what the var_dump returns. — Mehdi Brillaud, Apr 29 '15 at 10:39
inside the loop (before if(!empty ... )) We need to know if your request is good and if you get the right path for your images. It's hard to help you since I don't know your database. — Mehdi Brillaud, Apr 29 '15 at 10:48
mysql table name is images : `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL, `type` varchar(30) NOT NULL, `size` int(11) NOT NULL, `image` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ; and folder name is "upload" — Safin Chowdhury, Apr 29 '15 at 10:57

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

for doing this you need server-side codes(like PHP, nodejs, asp.net).

the procedure will be like this

1) create endpoint in server for loading Image data from database. 2) then write the data to client load and show image from database using php

3) using images in your sliders.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 29 '15 at 09:47

Omidam81

1,887
12
20

How to load image from mysql database in NivoSlider

1 Answers1