I’m trying to get the members photos to appear in the slide show but I’m having trouble getting them to display. The code I have now works but it’s not getting the correct images in the correct directory, its getting the images from the images directory and I need the images from members/$id/image01 and so on. Any help would be greatly appreciated asap.
First here’s the div to show the images:
[code]
<img class="image" id="image3" src="images/image3.jpg" alt="Image 3" />
<img class="image" id="image4" src="images/image4.jpg" alt="Image 4" />
<img class="image" id="image5" src="images/image5.jpg" alt="Image 5" />
<img id="previous-btn" src="images/previous-btn.png" height="60" width="60" alt="Previous Button" />
<img id="next-btn" src="images/next-btn.png" height="60" width="60" alt="Next Button" />
</div>
</div>
</div>
<!-- END DIV that contains the Photo Album form -->[/code]
Here’s the css for it:
#container {
height: 450px;
width: 600px;
}
#photo-wrapper {
position: relative;
width: 600px;
height: 450px;
background-color: #000;
border: 5px solid #000;
}
#transition-container {
width: 600px;
height: 450px;
position:absolute;
top: 0px;
left: 0px;
}
#previous-btn {
position: absolute;
bottom: 15px;
left: 15px;
cursor: pointer;
}
#next-btn {
position: absolute;
bottom: 15px;
right: 15px;
cursor: pointer;
}
.image {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
Here is the fade.js:
[code]var photoArray = new Array(’#image1’, ‘#image2’, ‘#image3’, ‘#image4’, ‘#image5’);
var photoIndex = 0;
var btnLock = false;
$(document).ready(function(){
// get client and container element height and width
var browserWidth = document.documentElement.clientWidth;
var browserHeight = document.documentElement.clientHeight;
var containerHeight = $('#container').height();
var containerWidth = $('#container').width();
// attach click handler to previous button and perform some action
$('#previous-btn').click(function() {
if(btnLock) return; // ignore click request if a transition is in progress
else btnLock = true; // remove click handler until transition is complete
// fade photo out
$(photoArray[photoIndex]).fadeOut('slow', function() {
photoIndex--;
if(photoIndex < 0) photoIndex = photoArray.length - 1;
moveToImg(photoIndex);
});
});
// attach click handler to next button and perform some action
$('#next-btn').click(function() {
if(btnLock) return; // ignore click request if a transition is in progress
else btnLock = true; // remove click handler until transition is complete
// fade photo out
$(photoArray[photoIndex]).fadeOut('slow', function() {
photoIndex++;
if(photoIndex > photoArray.length - 1) photoIndex = 0;
moveToImg(photoIndex);
});
});
// transition in first image
moveToImg(photoIndex);
});
function moveToImg(id)
{
$(photoArray[id]).fadeIn(‘slow’, function() {
btnLock = false;
});
}
[/code]
I also have the js file with all that stuff to make the js work but I don’t think you need that.