{"id":18,"date":"2012-07-22T16:16:35","date_gmt":"2012-07-22T16:16:35","guid":{"rendered":"http:\/\/www.theacidfrog.com\/blog\/?p=18"},"modified":"2012-07-29T14:19:04","modified_gmt":"2012-07-29T14:19:04","slug":"jquery-sortable-images-php-display-images-in-correct-order","status":"publish","type":"post","link":"https:\/\/www.theacidfrog.com\/blog\/jquery-sortable-images-php-display-images-in-correct-order\/","title":{"rendered":"jQuery sortable images &#8211; PHP display images in correct order"},"content":{"rendered":"<p>By using jQuery, PHP and MySQL you can create a clever an image sort script to allow users to choose the order of images in their advert for example.<\/p>\n<p>Once you have your jQuery Sortable plug-in installed (available here: <a title=\"jQuery Sortable\" href=\"http:\/\/jqueryui.com\/demos\/sortable\/\">http:\/\/jqueryui.com\/demos\/sortable\/<\/a>) and it is successfully posting the image order to MySQL you can load that order and display the images in that order.<\/p>\n<p><strong>Step 1<\/strong><\/p>\n<p>First of all you need to find all images that match the id of the record you are currently looking at e.g. example.com\/advert.php?cid=17 and call this &#8216;a&#8217;.<\/p>\n<pre lang=\"php\">\/\/ Find all images relating to this item\r\n$querya = \"SELECT * FROM images WHERE cid ='$cid'\";\r\n$resulta = mysql_query($querya) or die(mysql_error());\r\n\r\n$a = array(); \/\/ Define an Array\r\n$i=0; \/\/ Start the image count at 0 so the first result equals 1\r\n\r\nwhile($rowa=mysql_fetch_array($resulta)){ \r\n\u00a0\u00a0 \u00a0$keya=$i++;\r\n\u00a0\u00a0 \u00a0$a[$keya] = $rowa['imgdata'];\r\n}<\/pre>\n<p>This will produce an array of image file names stored in the MySQL table with a corresponding number starting with 1.<\/p>\n<p><strong>Step 2<\/strong><\/p>\n<p>Next we need to find the image order for the current id of the record we are looking at. The image order should be saved in the MySQL table a comma separate list e.g. 3,1,4,2,5 so we must also explode this list too and call it &#8216;b&#8217;.<\/p>\n<pre lang=\"php\">\/\/ Find order of images relating to this item\r\n$queryb = \"SELECT * FROM images_order WHERE cid = $cid\";\r\n$resultb = mysql_query($queryb) or die(mysql_error());\r\n\r\nwhile($rowb = mysql_fetch_array($resultb)){\r\n\t$b = $rowb['order'];\r\n}\r\n\r\n$b = explode(',', $b);<\/pre>\n<p><strong>Step 3<\/strong><\/p>\n<p>Next we need to match the order of the images to the actual images for this item. So we first define a new array called &#8216;c&#8217;. Then we link the image order &#8216;b&#8217; with the list of images in &#8216;a&#8217;. This will then display the images &#8216;a&#8217; in the order specified in &#8216;b&#8217;.<\/p>\n<pre lang=\"php\">\/\/ Match order of images to the actual images for this item\r\n$c = array(); \/\/ Define an Array\r\n\r\nforeach($b as $index) {\r\n    $c[$index] = $a[$index];\r\n}<\/pre>\n<p><strong>Step 4<\/strong><\/p>\n<p>Now we have the images in the correct order &#8216;c&#8217;. We now need to display this to the user.<\/p>\n<pre lang=\"php\">echo(\"&lt;ul&gt;\");\r\n\r\nforeach($b as $index) {\r\n\r\n    echo(\"&lt;li&gt;&lt;img src='image-uploads\/$a[$index]' \/&gt;&lt;\/li&gt;\");\r\n\r\n}\r\n\r\necho(\"&lt;\/ul&gt;\");<\/pre>\n<p>This will then display the images on the page in the correct order in a &lt;ul&gt; list.<\/p>\n<p>If you have any questions about this script then please feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By using jQuery, PHP and MySQL you can create a clever an image sort script to allow users to choose the order of images in their advert for example. Once you have your jQuery Sortable plug-in installed (available here: http:\/\/jqueryui.com\/demos\/sortable\/) and it is successfully posting the image order to MySQL you can load that order&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,4,3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/posts\/18"}],"collection":[{"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":13,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theacidfrog.com\/blog\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}