Kan man lösa detta via Jquery och hur?

mojitoo · 2010-07-05, 19:12

Hej!

Jag vet vad jag vill åstadkomma men inte hur jag ska göra och vad som behövs. Ni känner säkert alla till hur det fungerar att kolla på bilder på facebook, jag vill skapa en liknande funktion där endast foto "diven" uppdateras när man klickar på nästa, adressen i adressfältet ska även uppdateras så att man lätt kan länka en bild. Det ska även gå att använd piltangenterna för att bläddra mellan bilderna.
Vad behövs för att göra detta, räcker det med Jquery eller krävs något mer? Kan någon hjälpa mig med det, åtminstone att komma igång för just nu vet jag inte ens vart jag ska sätta första spad taget.

För att testa skapade jag ett snabbt galleri php och mysql för att testa. Ni kan se det live här:
http://9e72d9.tempopage.com/index.php?pid=1&gid=2

Koden för det visar jag nedan (inte välkodat men uppfyller sin funktion att gå att testa med)

index.php

PHP-kod:


			
<?php 

    include "db_photos.php"; 

?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

</head> 

<body> 

    <div id="logo">Liten fin logo som inte ska laddas om...</div> 

    <div id="picture"> 

    <?php 

    // Skriv ut bilden 

    if($picture){ 

        echo '<div class="picture">'.$picture.'</div>'; 

        echo "<br />"; 

        echo '<a href="test.php?pid='.$prev.'&gid='.$_GET['gid'].'">< Föregående</a>'; 

        echo " || "; 

        echo '<a href="test.php?pid='.$next.'&gid='.$_GET['gid'].'">Nästa ></a>'; 

        echo '<h1>Kommentarer</h1>'; 

        if($comments != null){ 

            foreach($comments as $comment){ 

                echo $comment."<br />"; 

            } 

        } 

        else 

            echo "Bilden har inga kommentarer än :("; 

    } 

    ?> 

    <!-- Comments Form --> 

    <form action="" method="post"> 

    <h1>Kommentera bilden</h1> 

    <?php 

    // Skriv ut ett meddelande om bilden blivit kommenterad eller inte. 

    if($msg){ 

        echo '<div class="msg">'.$msg.'</div>'; 

    } 

    ?>  

    <textarea id="comment" name="comment"></textarea> 

    <div class="clear"></div> 

    <p><input type="submit" name="submit" value="Kommentera" /></p> 

    </form> 

    </div> 

    <div id="footer">Ännu lite mer innehåll som inte ska laddas om...</div> 

</body> 

</html>

db_photos.php

PHP-kod:


			
<?php 



include('db_connection.php'); 



$err = array(); 

$success = array(); 



if($_GET['pid'] && $_GET['gid'] &&  $_GET['gid'] != null){ 

    $pid = mysql_real_escape_string($_GET['pid']); 

    $gid = mysql_real_escape_string($_GET['gid']); 

     

    // Kolla så att bilden finns i det albumet 

    $result = mysql_query("SELECT address FROM photos WHERE id='".$pid."' AND galleryid='".$gid."'"); 

    if(mysql_num_rows($result) == 1){ 

        // Bilden fanns, skriv ut den 

        $result = mysql_fetch_assoc($result); 

        $address = $result['address']; 

        $picture = "<img src='".$address."' />"; 

         

        // Nästa 

        $result = mysql_query(" 

            SELECT id 

            FROM photos 

            WHERE id > '".$pid."' 

            ORDER BY id ASC  

            LIMIT 1"); 

        if(mysql_num_rows($result) > 0){ 

            $result = mysql_fetch_assoc($result); 

            $next = $result['id']; 

        } 

        else{ 

            // Det fanns inga fler bilder, om användaren klickar på nästa nu så kommer han tillbaka till första bilden 

            $result = mysql_fetch_assoc(mysql_query(" 

            SELECT id 

            FROM photos 

            ORDER BY id ASC  

            LIMIT 1")); 

            $next = $result['id']; 

        } 

        // Föregående 

        $result = mysql_query(" 

            SELECT id 

            FROM photos 

            WHERE id < '".$pid."' 

            ORDER BY id DESC  

            LIMIT 1"); 

        if(mysql_num_rows($result) > 0){ 

            $result = mysql_fetch_assoc($result); 

            $prev = $result['id']; 

        } 

        else{ 

            // Det fanns inga fler bilder, om användaren klickar på föregående nu så kommer han tillbaka till sista bilden 

            $result = mysql_fetch_assoc(mysql_query(" 

            SELECT id 

            FROM photos 

            ORDER BY id DESC 

            LIMIT 1")); 

            $prev = $result['id']; 

        } 

         

        // Om det finns några kommentarer, skriv ut dem. 

        $result = mysql_query(" 

        SELECT comment 

        FROM photo_comments 

        WHERE pid=".$_GET['pid'].""); 

        while ($row = mysql_fetch_array($result)){  

            $comments[] = $row['comment']; 

        } 

    } 

    else{ 

        $err[] = 'Bilden du söker finns inte!'; 

    } 

} 



// Användaren har valt att kommentera bilden.  

if ($_POST['submit']=='Kommentera'){ 

    if($_POST['comment'] != null){ 

        $_POST['comment'] = mysql_real_escape_string($_POST['comment']); 

        $_GET['pid'] = mysql_real_escape_string($_GET['pid']); 

         

        mysql_query("INSERT INTO photo_comments(pid, comment, dt) 

                        VALUES( 

                            '".$_GET['pid']."', 

                            '".$_POST['comment']."', 

                            NOW() 

                        )"); 

        if(mysql_affected_rows($db_connection)==1){ 

            $success[]='Du har lagt till en kommentar!'; 

        } 

        else{ 

            $err[]='Något gick fel och din kommentar har inte blivit sparad :('; 

        } 

    } 

    else{ 

        $err[]='Du måste först skriva en kommentar för att sedan kunna publicera den.'; 

    } 

} 



// Kolla om vi fått några felmeddelanden, skriv i så fall ut dem.  

if(count($err)){ 

    $msg = $msg.implode('<br />',$err)."<br />"; 

} 

// Kolla om vi fått några meddelanden, skriv i så fall ut dem.  

if(count($success)){ 

    $msg = $msg.implode('<br />',$success)."<br />"; 

} 

?>

Hoppas att ni förstår vad jag är ute efter.

goose · 2010-07-05, 20:04

http://api.jquery.com/load/ är nog det du är ute efter i jquery.

Clarence · 2010-07-05, 21:13

Jquerys ajax-funktioner på länken ovan löser inladdningen.

Ett history plugin löser bokmärkande (+tillbaka-knapp osv). Se t ex http://www.asual.com/jquery/address/samples/ eller http://benalman.com/projects/jquery-bbq-plugin/ .. Finns många och jag har för dålig koll för att rekommendera en som är allmänt bra även om jag haft favoriter till mina projekt.

Och sen en event handler för keypress/keydown för att hantera navigeringen med piltangenter.

Jquery löser det inte åt dig, men som alltid underlättar det en hel del.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Kan man lösa detta via Jquery och hur?