[Solved...but messy] clickable thumbnails to open jQuery gallery with AJAX

[eluser]DiLer[/eluser]
I hope it's OK to make double posts.

Problem solved (but need additional work)

It works, but I have to make some improvements. If you have any suggestions, you're welcome to make a post. I post my code for people who are interested in doing similar projects.

Here is what I did:
I integrated the live() part and the code where I use the <a> title attribute to store my ID as mentioned by pickupman.
My previous test.php file is now fully integrated with a controller, model and view.

My URL looks like this:
http://localhost/ci/design/tische

I created a new function for my design controller and called it "test". Test loads a model namend "model_test" to get all data from the ID (more on that later). It then calls the view "view_test" with this data.

I had some linking problems that are now fixed with the right Control-Model-View setup.
Another problem is the jQuery Galleryview that depends on a script loaded only once at the begining inside the header.php. When I click on a thumbnail only the gallery gets changed, but without a page refresh the information in the script is lost. I fixed this by integrating the script inside my view_test.php file. It works, but is a bad solution.

Code

view_tische.php (code changed for forum display. Ignore ">" on <img> and <a>)

Code:

<!-- /* ---------
  Javascript
------------
Gets the ID from the thumbnail (tischid), loads "test" (from Design-controller) and passes the ID (the ID is now called "didi")
*/ -->

function test(tischid)
{
$('#gallery').load('<?php echo base_url(); ?>design/test', {didi:tischid});   //load "test" from design controller with ID
}

<!-- /* ---------
  Thumbnails
------------
A list of every pic from the database table "tische". The class "thumb_link" is important, see jquery part below.
*/-->

<div id="thumbs">
  <ul>
    &lt;?php foreach($tische as $tisch)
      {
        echo '<li><a> class="thumb_link" href="#'.$tisch->name.'" title="'.$tisch->id.'"><img> src="'.base_url().'img/tische/'.$tisch->thumb.'.jpg" alt="'.$tisch->name.'" title="'.$tisch->name.'" /></a></li>'; echo "\n";
      }
    ?&gt;
  </ul>
</div>

&lt;!-- /*------------------
  jQuery Galleryview
------------------
This setup is required by the jQuery Gallery. The id="myGallery" shouldn't be changed, because Galleryview is looking for it.
The first picture needs the "p1" id.
*/ --&gt;

<div id="gallery">
     <ul id="myGallery">
              <li><img id="p1" src="&lt;?php echo base_url(); ?&gt;img/tische/tisch_1_1.jpg" title="Tisch1" /></li>
              <li><img src="&lt;?php echo base_url(); ?&gt;img/tische/tisch_1_2.jpg" title="Tisch2" /></li>
              <li><img src="&lt;?php echo base_url(); ?&gt;img/tische/tisch_1_3.jpg" title="Tisch3" /></li>
     </ul>
     <div id="edit" style="margin-left:450px;">
              <b>Beschreibung:</b><br />
              Bla Bla Bla
     </div>
</div>

&lt;!--  /*----------
  jQuery part
------------
Gives every thumbnail link a click() function with the title attribute as parameter similar to onclick="test(1)"
*/ --&gt;

$(".thumb_link").live('click', function(){
  test($(this).attr("title")); //Get title attribute from link and pass to test() function
});

design.php (the controller for everything. No template,etc. integrated)

Code:

<?php

class Design extends CI_Controller {

//removed index() and tische()

         public function test()
         {
                 $this->load->model('test_model');
                 $data['tisch'] = $this->test_model->getID();
                 $this->load->view('view_test', $data);
         }
}

test_model.php (I guess a normal variable instead of an array makes more sense)

Code:

<?php

class Test_model extends CI_Model {

        function getID() {

                 $id=$_POST['didi'];      // get the ID that is stored in 'didi' and assign it to $id

                 $q = $this->db->get_where('tische', array('id' => $id));   //get the item from the database where the ID matches

                 if($q->num_rows() > 0) {
                        foreach ($q->result() as $row) {          // probably overkill
                            $data[] = $row;
                        }
                 }
                 return $data;

        }
}

view_test.php (creates the HTML code for jQuery Galleryview when thumbnail is clicked)

Code:

<!-- /* ---------------------
  reload Galleryview Config
--------------------------
The config is already implemented in the header, but is only loaded once I guess.
There is definetly a better solution to that. It works, but it is not good.
Maybe something with live() I don't know.
*/ -->

        $(document).ready(function(){         // only loaded at page load?
                $('#myGallery').galleryView({

                        ....                 // just some Galleryview settings

                });
        });

<!-- /* -------------------------
  creating html for Galleryview
------------------------------
Use data from databse to create the list with all pictures and the description.
$tisch[0] because I send an array with only one item in it :/
*/ -->

<?php

$pics = explode(",",$tisch[0]->gallery);            // "gallery" stores all names of pictures seperated with ","

echo '<ul id="myGallery">';
$temp = 'id="p1"';                       // first <img> needs this class
foreach ($pics as $pic)
{
  echo '<li><img> '.$temp.' src="'.base_url().'img/tische/'.$pic.'.jpg" title="'.$tisch[0]->name.'" /></li>';
  $temp = '';                       // overwrite $temp so all the other <img> won't get this class
}

echo '</ul>';
echo '<div id="edit" style="margin-left:450px;">
     Beschreibung:<br />'.$tisch[0]->description.'
     </div>';

?&gt;

No characters remaining!
if question -> PM OR reply

regards
DiLer