[eluser]DiLer[/eluser]
About me
Hi. I'm completely new to CodeIgniter, jQuery and AJAX (javascript in general). Started this monday
I found CodeIgniter because I make little "websites"(tools) for me with PHP as a hobby. Normally I learn stuff like that by learning-by-doing/tutorials but I'm stuck and I have to show some progress very soon and want to know if I'm even heading in the right direction.
The site and what it should look like
It's not really complicated. That's what even more frustrating about it *g*
The website is about furniture stuff you can buy, like lamps, chairs, tables and whatnot. After selecting a categorie you get to a page that is divided in two parts. A left side and a right side.
On the left side you have a lot of thumbnails of all lamps (or chairs/tables, etc.).
On the right side is a big picture of the selected product with more little pictures beside it (different angles of the same product) and a description beneath it. (that's realized with jQuery)
When you click on a thumbnail the whole gallery on the right gets switched with new images of the selected thumbnail. Of course not only the big pictures is changing, but also the small pictures beside the big one and the description underneath it.
What it look like right now
I installed CI and jQuery and it's up and running.
The URL stuff is working (I removed the index.php) and all prototype sites have been made (where you choose your categorie, etc.). I made a database with some test entries and the categories to choose from.
You can navigate from the front page to products and then tables for example and get to the two-part site with the thumbnails.
The thumbnails are working. I load them from the database. To get a nice gallery (the big picture on the right) I use "jQuery Galleryview 3.0". With the right configuration it's exactly what I want and it's working, too.
My Problem
So where is the problem?
I can't get the thumbnails to work the way I want. Let's say you choose "tables" from the categories. You currently get 5 thumbnails of different tables to choose from and on the right side the jQuery gallery with some test images.
I don't know how to change the jQuery gallery according to which thumbnail I click.
What I tested
I first tried normal javascript with an onclick event to change the picture inside the jQuery gallery. The problem is, that I can only change the small pictures next to the big one (where you can see what picture comes next) and jQuery loads the old pictures anyway. The big picture will still cycle through them.
I guess I have to reload the whole gallery so I thought about AJAX. I didn't even know that you can use jQuery to accomplish the AJAX approach but yeah, it makes sense. After some failed tries with .load(), .click() and other things I started almost from scratch.
This is what I have in mind now:
Every thumbnail has an ID (from the database) and an onclick event. Inside onclick is a function that passes this ID as a parameter. The function itself then loads a php site with jQuerys .load() and the ID as its parameter. The php site uses the ID to create the html code I need for the jQuery gallery.
I tried that but can't even get the javascript onclick part to work properly. Error: "missing formal parameter" at function blubb(1). At least the id works.
-------------------------------------------------------------------------
Here is the complete site (without header & footer) divided so it's easier to read:
My non working function (I have no idea how the paramter in here works, sry)
Code:
[removed]
function blubb(portid)
{
$("#myGallery").load("<?php echo base_url(); ?>test.php", {var:portid})
}
[removed]
The left side with the thumbnails: (please ignore the ">" for <a> and <img>. The forum otherwise removes part of the code. My fault?)
Code:
<div id="thumbs">
<ul>
<?php foreach($tische as $tisch)
{
echo '<li><a> onclick="function blubb('.$tisch->id.')" href="#'.$tisch->name.'"><img> src="'.base_url().'img/tische/'.$tisch->thumb.'.jpg" alt="'.$tisch->name.'" title="'.$tisch->name.'" /></a></li>'; echo "\n";
}
?>
</ul>
</div>
The right side with the jQuery gallery: (hard coded) (outer div "content" was created for testing)
Code:
<div id="content">
<div id="gallery">
<ul id="myGallery">
<li><img id="p1" src="<?php echo base_url(); ?>img/tische/tisch_1_1.jpg" title="Tisch1" /></li>
<li><img src="<?php echo base_url(); ?>img/tische/tisch_1_2.jpg" title="Tisch2" /></li>
<li><img src="<?php echo base_url(); ?>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>
</div>
The databse for "Tische" looks like this:
id --- name --- description --- thumb --- gallery
1 --- Kids Table --- small table for kids --- table_1_0 --- table_1_1,table_1_2,table_1_3,....
The idea is to use explode() on the last entry and then fill up the list I need for the jQuery gallery (see code above). Good idea?
Example:
Code:
$pic = explode(",",$tisch->gallery);
And then just fill them in like
Code:
<li><img src="<?php echo base_url().'img/tische/'.$pic[1]; ?>.jpg" /></li>
with foreach or something.
---------------------------------------------
The big question
Is that even the right way? Is there an easier solution? And how does it work if I go that way?
Thanks.
best regards
DiLer
