Shintex
10-05-2012, 01:37 AM
Okay so here's the page.
http://94.168.220.152:82/
As you can see, there are two slideshow controls. When I click both of them, the same image appears. When I click on them, I want it to be different images, like an actual slideshow.
The javascript as of now:
$(document).ready(function(){
$('img#bg').attr( 'src', 'background.png' ).show();
$('#slideshow-caption').text( $('#slideshow-buttons img:first').attr( 'title' ) );
$('#slideshow-buttons img:first').attr( 'src', 'imgs/slideshow_page_selected.png' );
var selected = $('#slideshow-buttons img');
$('#slideshow-buttons img').each(function(){
$(this).click(function(event){
if( selected == this )
return false;
var m_this = this;
$('img#bg').fadeOut( 'slow', function(){
$('#slideshow-caption').text( $(m_this).attr( 'title' ) );
$(selected).attr( 'src', 'imgs/slideshow_page.png' );
$(m_this).attr( 'src', 'imgs/slideshow_page_selected.png' );
selected = m_this;
$('img#bg').fadeIn('slow');
});
});
});
});
Thanks much. Need some urgent help on this.
http://94.168.220.152:82/
As you can see, there are two slideshow controls. When I click both of them, the same image appears. When I click on them, I want it to be different images, like an actual slideshow.
The javascript as of now:
$(document).ready(function(){
$('img#bg').attr( 'src', 'background.png' ).show();
$('#slideshow-caption').text( $('#slideshow-buttons img:first').attr( 'title' ) );
$('#slideshow-buttons img:first').attr( 'src', 'imgs/slideshow_page_selected.png' );
var selected = $('#slideshow-buttons img');
$('#slideshow-buttons img').each(function(){
$(this).click(function(event){
if( selected == this )
return false;
var m_this = this;
$('img#bg').fadeOut( 'slow', function(){
$('#slideshow-caption').text( $(m_this).attr( 'title' ) );
$(selected).attr( 'src', 'imgs/slideshow_page.png' );
$(m_this).attr( 'src', 'imgs/slideshow_page_selected.png' );
selected = m_this;
$('img#bg').fadeIn('slow');
});
});
});
});
Thanks much. Need some urgent help on this.