adding images to div dynamicaly

I have a images on page , on click of image i want to check its alt value and then add to the class accordingly . for example if i click on image whose alt value is 4 ,then 1,2,3 image should go in upper class and 5,7,8 should go in lower class.

how to achieve this ..

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ImageFlow</title>
    <meta name="robots" content="index, follow, noarchive" />
    <link rel="stylesheet" href="style.css" type="text/css" />

    <!-- This includes the ImageFlow CSS and JavaScript -->
    <link rel="stylesheet" href="imageflow.packedfunct2.css" type="text/css" />
    <script type="text/javascript" src="imageflow.packed.js"></script>
    <script type="text/javascript" src="jquery.js"></script>


     <script type="text/javascript">

    $(document).ready(function () {
      $("img").click(function(){
        var pos=$('img', this).attr('alt');
       alert('i am imageFlip'+this.alt);
       console.log('i am Image Flip');
        ('$this').addClass('t1');
              });
            });

       </script>


</head>
<body style="background-image:url('img2/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>Sample For Image Slider</h1>




    <!-- This is all the XHTML ImageFlow needs -->
    <div id="myImageFlow" class="imageflow">

        <img src="img2/thumb1.jpg"   longdesc="" width="300" height="360" alt="1" />
        <img src="img2/thumb2.jpg"  longdesc="" width="300" height="360" alt="2" />
        <img src="img2/thumb3.jpg"   longdesc="" width="300" height="360" alt="3" />
        <img src="img2/thumb4.jpg"  longdesc="" width="300" height="360" alt="4" />
        <img src="img2/thumb5.jpg"   longdesc="" width="300" height="360" alt="5" />
        <img src="img2/thumb6.jpg"   longdesc="" width="300" height="360" alt="6" />
        <img src="img2/thumb7.jpg"   longdesc="" width="300" height="360" alt="7" />
        <img src="img2/thumb8.jpg"  longdesc="" width="300" height="360" alt="8" />
        <img src="img2/thumb9.jpg"  longdesc="" width="300" height="360" alt="9" />
        <img src="img2/thumb10.jpg"  longdesc="" width="300" height="360" alt="10" />
        <img src="img2/thumb11.jpg"  longdesc="" width="300" height="360" alt="11" />
        <img src="img2/thumb1.jpg"  longdesc="" width="300" height="360" alt="12" />
        <img src="img2/thumb2.jpg"  longdesc="" width="300" height="360" alt="13" />
        <img src="img2/thumb3.jpg"  longdesc="" width="300" height="360" alt="14" />
        <img src="img2/thumb4.jpg"  longdesc="" width="300" height="360" alt="15" />
    </div>

</body>

Thanks and Regards,

Answers


if I take it well you need something like this

$(document).ready(function () {
    $("img").click( function() {
        var t = $(this);
        t.prevAll().removeClass('lower').addClass('upper');
        t.nextAll().removeClass('upper').addClass('lower');
    })
})

Need Your Help

Why don't we exit/die a script after redirect in Javascript?

javascript php redirect exit

We need to do exit; after redirect in php because exit; doesn't stop the rest of the code from running.

Possible to have the 'Part' section to always start on odd page number?

latex lyx

Is it possible to always have the 'Part' section to start at an odd page number? So that if the part one section extends to page two, then part two automatically moves to page three. I'm using Lyx to