mirror of
https://github.com/FunKey-Project/FunKey-Project.github.io.git
synced 2025-12-12 10:18:50 +01:00
116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
$(document).ready(function () {
|
|
|
|
/* Convert a loose structure of:
|
|
|
|
article
|
|
.step-title
|
|
.step-thumb
|
|
.step-thumb
|
|
<content>
|
|
.step-title
|
|
.step-thumb
|
|
.step-thumb
|
|
<content>
|
|
|
|
into a strict hierarchy of containers:
|
|
|
|
article
|
|
.step
|
|
.step-title
|
|
.step-thumbs
|
|
.step-thumb
|
|
.step-thumb
|
|
.step-contents
|
|
<content>
|
|
.step
|
|
.step-title
|
|
.step-thumbs
|
|
.step-thumb
|
|
.step-thumb
|
|
.step-contents
|
|
<content>
|
|
*/
|
|
|
|
/* First, wrap all "step-title" article elements and all elements
|
|
until next such element or end of article into a "step" div */
|
|
$("article").each(function () {
|
|
var step = $();
|
|
var wrap = false;
|
|
$(this).contents().each(function () {
|
|
if ($(this).hasClass("step-title")) {
|
|
if (wrap && step.length > 1) {
|
|
step.wrapAll('<div class="step" />');
|
|
}
|
|
step = $();
|
|
wrap = true;
|
|
}
|
|
step = step.add($(this));
|
|
});
|
|
if (wrap && step.length > 1) {
|
|
step.wrapAll('<div class="step" />');
|
|
}
|
|
});
|
|
|
|
/* Then wrap all "step step-thumb" elements into a "step-thumbs"
|
|
div */
|
|
$(".step p").each(function () {
|
|
var thumbs = $();
|
|
$(this).contents().each(function () {
|
|
if ($(this).hasClass("step-thumb")) {
|
|
thumbs = thumbs.add($(this));
|
|
}
|
|
});
|
|
if (thumbs.length > 0) {
|
|
thumbs.unwrap();
|
|
thumbs.wrapAll('<div class="step-thumbs" />');
|
|
}
|
|
});
|
|
|
|
/* Then wrap all other except "step step-title" ones into a
|
|
"step-contents" div */
|
|
$(".step").each(function () {
|
|
var contents = $();
|
|
$(this).contents().each(function () {
|
|
if (!$(this).hasClass("step-title") &&
|
|
!$(this).hasClass("step-thumbs") &&
|
|
!$(this).hasClass("step-thumb")) {
|
|
contents = contents.add($(this));
|
|
}
|
|
});
|
|
if (contents.length > 0) {
|
|
contents.wrapAll('<div class="step-contents" />');
|
|
}
|
|
});
|
|
|
|
/* Create the large "step-picture" from the first thumbnail in a
|
|
"step-thumbs" */
|
|
|
|
/* For each first thumbnail in a "step-thumbs" */
|
|
$(".step-thumbs img:first-child").each(function () {
|
|
|
|
/* Clone first thumbnail, change its class to create the
|
|
"step-picture" by default and insert it in the parent
|
|
step */
|
|
$(this)
|
|
.clone()
|
|
.removeClass("step-thumb")
|
|
.addClass("step-picture")
|
|
.insertBefore($(this).parent());
|
|
|
|
/* Make the first thumbnail active by default */
|
|
$(this).addClass("active");
|
|
})
|
|
})
|
|
|
|
/* Attach a delegate function on mouse over thumbnail to change the
|
|
step main picture and radio-toggle the thumbnails */
|
|
$(".step-thumb").on("mouseover", function() {
|
|
|
|
/* Set picture image source to the thumbnail image source */
|
|
$(this).closest(".step").find(".step-picture").attr("src", $(this).attr("src"));
|
|
|
|
/* Activate the corresponding thumbnail and deactivate all others */
|
|
$(this).addClass("active")
|
|
.siblings().removeClass("active");
|
|
});
|