JQuery Slider Value with PHP Generated Input

Question

Below is my code I have everything working except dynamically linking the sliders to each input field. Here is my live page

<?php $dirname="panos/" ; $images=g lob($dirname. "*.jpg");
foreach($images as $image) {
    $imageName=s ubstr($image, -14); echo '
    <img src="resize.php?w=450&amp;img='.$image. '" />
    <input    id="'.$imageName. '-slider"/>
    <br />
    <div style="width:450px" id="'.$imageName. '" class="slider"></div>
'; } ?>
<script>
    $(function () {
        $(".slider").each(function () {
            $(this).slider({
                value: 0,
                min: 0,
                max: 360,
                step: 1,
                stop: function (event, ui) {
                   var v = $(this).attr('id')
                   var n = $(this).slider('value')
                   $("#" + v + "-slider").val(n);
                   window.alert(v)
               },
               create: function (event, ui) {
                   var v = $(this).attr('name')
                   var n = $(this).slider('value')
                   $("#" + v + "-slider").val('0');
               }
           });
       })
    });
</script>

Answer 1

FIGURED IT OUT!!! The files that was getting pulled by the PHP had ".jpg" in the middle of it! And even tho it is a valid ID name it ended up messing up the jquery portion of it! I just did this

$imageNameLong = substr($image, -14);
$imageName = substr($imageNameLong,0 , -4);

and took off that ".jpg" and now it works flawlessly!!!