PDA

View Full Version : jQuery fadeTo image slideshow issues



Rockonmetal
05-16-2009, 01:17 AM
okay, so I am making my own slideshow with jQuery. It is going GREAT! except for one currently problem. Once you select an album, the images in the album fade to what the thumbs are when they aren't on mouseover. That is a problem, because, it looks weird, and it just isn't what I want... here is the jQuery code!

<script>
$(document.body).ready( function(){
$(".gallery li img").fadeTo("slow", .66);
$(".gallery li img").mouseover( function(){
$(this).fadeTo("fast", 1);
});
$(".gallery li img").mouseout( function(){
$(this).fadeTo("fast", .66);
});
$(".gallery li img").click( function(){
var item = $(this).attr("rel");
$(".gallery li #" + item + ":hidden").css("display", "inline");

});
});
</script>



<ul class="gallery">
<li>
<img src="art/graphics/The Power of Synergy/thumb.png" id="icon" rel="a"/>
<ul id="a">
<?php
loadAlbum("art/graphics/The Power of Synergy/", "a"); // Loads images in that album onto the page with list elements
?>
</ul>
</li>

<li>
<img src="art/photos/landscape/thumb.png" id="icon" />
<ul>
<?php
loadAlbum("art/landscape/", "b");
?>
</ul>
</li>
<li>
<img src="art/photos/music/thumb.png" id="icon" />
<ul>
<?php
loadAlbum("art/photos/music/", "c");
?>
</ul>
</li>
</ul>
That load album function looks like:

function loadAlbum($p1, $p2){
foreach(scandir($p1) as $key => $val)
{
if($key<1)
{
}
else
{
echo '<li>';
echo '<img src="'. $p1 .'' . $key . '.png" id="' . $p2 . $key . '" />';
echo '</li>';
}
}
}

Now that we have got all the code. Again, I want to have the images in the album have no opacity. So they cannot be translucent. I am also trying to figure out how to advance the images from one to the next. I am thinking about doing it by ID... but idk... thank you very much!