Menu
Dear members, I’ve been losing hair over this one, need help! I found this jquery “tabs script” which also fades between the content DIVs. I want the ‘Next’ and ‘Previous’ DIVs to reside on the same page as the fading content (and it does right now) and this part is working. However the ‘selectors link-section’ at the bottom (DIV one, two, three and four) I want to move to another page (thumbnail gallery), giving me a thumbnail page, which when clicking on am images takes my to that specific div/img on page 2, showing the larger image and the next and previous buttons below it.
Does anyone know how to make such a link, like <a href=”page2.html#specific img”>Thumnail img</a> (that one of course doesn’t work)
Grateful for any feedback. This is my script:
latest jquery.min.js + this jquery:
jQuery(document).ready(function() {
// initialise variables
var index = 0;
var nextIndex = 0;
// fade out current detail and fade in the next detail
fadeInOut = function() {
$(‘.detail:eq(‘+index+’)’).fadeOut(500,
function() {
index = nextIndex;
$(‘.detail:eq(‘+index+’)’).fadeIn(500);
}
)
}
// show selected detail
$(‘.selector’).click(function(){
nextIndex = $(‘.selector’).index($(this));
fadeInOut();
});
// move to previous detail
$(‘#previous’).click(function(){
nextIndex -= 1;
if (nextIndex < 0) nextIndex = 3;
fadeInOut();
})
// move to next detail
$(‘#next’).click(function(){
nextIndex += 1;
if (nextIndex > 3) nextIndex = 0;
fadeInOut();
})
// initially show first detail
$(‘.detail:eq(0)’).show();
});
… And the HTML…
<div id=”outer”>
<div class=”detail”>First section</div>
<div class=”detail”>Second section</div>
<div class=”detail”>Third section</div>
<div class=”detail”>Fourth section</div>
</div>
</td></tr></tbody>
</table>
<div class=”selector”>one</div>
<div class=”selector”>two</div>
<div class=”selector”>three</div>
<div class=”selector”>four</div>
Thankful for any advise. Best regards Kullman