New to jQuery/javascript, but not too afraid... Friend helped me out with the slideshow script below, and I've pulled jellekralt's Responsive Tabs jQuery script from github...
I have the javascript, auto-playing, crossfading slideshow that loops images (specified in each page's html file (in js-determined random order, FWIW)).
I had main section pages linking out to subpages, with different images than the main pages' in each subpage.
But now I've chosen to use the Responsive Tabs jQuery code (https://github.com/jellekralt/Responsive-Tabs) to only have main section pages, and tabs to open panels that show (what was) the subpages' text instead. (Keeping each main section and subsections in the same html file provides the responsive change from tabs to accordion based on a media query breakpoint, allowing for clearer navigation and presentation on both desktop and mobile... and fewer pages, of course!
I'd like the tabs (or accordion headings after breakpoint) to trigger a change in the specified image files in the slideshow, as would have happened if going to a new/separate subsection's page, but I want this to happen while staying on the same page.
The image slideshow is not/can not be IN each tab.
My basic html structure/div order is:
head
body
wrapper
content container
logo
*[script] - slideshow
main section info text
main section nav (to other main section pages)
*[script] - Responsive Tabs (subsection text displayed in div/panel triggered by tabs)
[close content container]
([script]) (sticky) footer
[close wrapper]
[close body]
html of the slideshow area (very simple! - "fadein" class triggers the slideshow upon page load):
<div class="imagearea">
<div class="fadein">
</div>
</div>
slideshow script:
<script>
$(function () {
var randomize = function (array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
var assets = [{
url: "images/image_01.jpg"
}, {
url: "images/image_02.jpg"
}, {
url: "images/image_03.jpg"
}, {
url: "images/image_04.jpg"
}, {
url: "images/image_05.jpg"
}];
var preload = function (assets) {
var num = assets.length,
pointer = 0;
dom = $('.preload img'),
getNextUrl = function (assets) {
if (pointer < (num - 1)) {
pointer++;
} else {
return false;
}
dom.attr('src', assets[pointer].url);
dom.onload = getNextUrl(assets);
};
dom.onload = getNextUrl(assets);
dom.attr('src', assets[0].url);
};
var it = 0; //holding position of assets array
var img = $('<img/>');
assets = randomize(assets);
preload(assets);
for(var x = 0; x < assets.length; x++){
img = $('<img/>').attr('src',assets[x].url);
$('.fadein').append(img);
}
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').addClass('dropback')
.fadeOut(2500).next('img').removeClass('dropback')
.fadeIn(2500).end().appendTo('.fadein');
}, 7500);
});
</script>
html of Responsive Tabs section:
- item1
- item2
- item3
- item4
<div id="tab-1">
<p>blah blah blah. Lorem ipsum and so forth...</p>
</div>
<div id="tab-2">
<p>yadda yadda more text and such</p>
</div>
<div id="tab-3">
<p>something else the client wants to say</p>
</div>
<div id="tab-4">
<p>oh yeah, and another thing...</p>
</div>
</div>
Responsive Tabs script (included in html doc - for full jquery.responsiveTabs.js script (too long to post here) please check out https://github.com/jellekralt/Responsive-Tabs):
<!-- jQuery with fallback to the 1.* for old IE -->
<!--[if lt IE 9]>
<script src="js/jquery-1.11.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="js/jquery-2.1.0.min.js"></script>
<!--<![endif]-->
<!-- Responsive Tabs JS -->
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: true,
animation: 'break',
collapsible: 'accordion',
setHash: true,
disabled: []
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
I want the Responsive Tabs list items #tab-1, #tab-2, #tab-3, and #tab-4 (in addition to opening the related text panel) to allow me to specify different images (could include in either the existing slideshow script, or to trigger a different/replacement to the original/existing slideshow, in the same "imagearea" div - whichever makes it work!
So in a nutshell, what I'm looking for is:
upon page load: image_01, image_02, image_03, ...04, ...05
upon clicking #tab-1: (tab-1 panel/text and) image_06, ...07, ...08
upon clicking #tab-2: (tab-2 panel/text and) images 09, 10, 11...
upon clicking #tab-3: (tab-3 panel/text and) images 12, 13, 14...
upon clicking #tab-4: (tab-4 panel/text and) images 15, 16, 17...
Possible? Triggering multiple events like this?: http://css-tricks.com/forums/topic/trigger-multiple-events-on-click-with-javascriptjquery/ As I said, I'm new to js/jq, so please be as detailed as you think I'll need.
Please and Thank You, AK
