[es] - Primena jQuery-a nad stranicom koja se poziva kroz Ajax?

nightcrawler47
Pedja Dunjic
Student
Beograd,Srbija

Član broj: 248801
Poruke: 1
*.adsl-a-1.sezampro.yu.

Profil

Primena jQuery-a nad stranicom koja se poziva kroz Ajax?

^{27.01.2010. u 02:34 - pre 173 meseci}

Da li neko zna kako da nateram Jquery da radi na stranici koja se vrati kao responseText kroz ajax?
tj.
Pomoci standardnog JS sam odradio Ajax i kao responseText mi se vraca stranica nesto.php. Na stranici nesto.php nalaze se slike iz baze organizovane kao kao preview galerija. Da li neko zna kako da nateram Jquery da radi neke animacije nad slikama koje su vracene kroz ajax?

js kod:

Code:
function GetXmlHttpObject()
    { //funkcija za kreiranje xmlhttp objekta
        try{
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e){
    // Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

var xmlHttp = null;

//Output-i

function setOutput()
    {
        if(xmlHttp.readyState == 4)
        {
            document.getElementById('result').innerHTML = xmlHttp.responseText;
        }
    }

function prikaz()
    {
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp != null)
        {
            xmlHttp.open("GET", "stampa.php", true);
            xmlHttp.send(null);
            xmlHttp.onreadystatechange = setOutput;
        }
    }

JQuery:

Code:
$(document).ready(function() {

    //move the image in pixel
    var move = -15;

    //zoom percentage, 1.2 =120%
    var zoom = 1.2;

    //On mouse over those thumbnail
    $('.item').hover(function() {

        //Set the width and height according to the zoom percentage
        width = $('.item').width() * zoom;
        height = $('.item').height() * zoom;

        //Move and zoom the image
        $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

        //Display the caption
        $(this).find('div.caption').stop(false,true).fadeIn(200);
    },
    function() {
        //Reset the image
        $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

        //Hide the caption
        $(this).find('div.caption').stop(false,true).fadeOut(200);
    });

});

css:

Code:

body {
       font-family:arial;
   }

   .item {
       width:125px;
       height:125px;
       border:4px solid #222;
       margin:5px 5px 5px 0;

       /* required to hide the image after resized */
       overflow:hidden;

       /* for child absolute position */
       position:relative;

       /* display div in line */
       float:left;
   }

   .item .caption {
       width:125px;
       height:125px;
       background:#000;
       color:#fff;
       font-weight:bold;

       /* fix it at the bottom */
       position:absolute;
       left:0;

       /* hide it by default */
       display:none;

       /* opacity setting */
       filter:alpha(opacity=80);    /* ie  */
       -moz-opacity:0.8;    /* old mozilla browser like netscape  */
       -khtml-opacity: 0.8;    /* for really really old safari */
       opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

   }

   .item .caption a {
       text-decoration:none;
       color:#0cc7dd;
       font-size:16px;

       /* add spacing and make the whole row clickable*/
       padding:5px;
       display:block;
   }

   .item .caption p {
       padding:5px;
       margin:0;
       font-size:10px;
   }

   img {
       border:0;

       /* allow javascript moves the img position*/
       position:absolute;
   }

   .clear {
       clear:both;
   }

html:

Code:
   <div class="item">
       <a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>
      <div class="caption">
           <a href="">Title</a>
           <p>Description</p>
       </div>
    </div>

ovo bi trebalo da radi ovo;

Generalno problem je taj shto jQuey radi savrseno na stranici kada se ne poziva kroz ajax... ali kako da ga nateram da radi kada stranicu pozovem kroz ajax?

Unapred zahvalan jQuery noob

_{Kod stavljajte unutar tag-ova za kod.}

_{[Ovu poruku je menjao Nikola Poša dana 27.01.2010. u 10:39 GMT+1]}

Odgovor na temu