משתמש:קיפודנחש/gallery-slideshow.js
הערה: לאחר הפרסום, ייתכן שיהיה צורך לנקות את זיכרון המטמון (cache) של הדפדפן כדי להבחין בשינויים.
- פיירפוקס / ספארי: להחזיק את המקש Shift בעת לחיצה על טעינה מחדש (Reload) או ללחוץ על צירוף המקשים Ctrl-F5 או Ctrl-R (במחשב מק: ⌘-R).
- גוגל כרום: ללחוץ על צירוף המקשים Ctrl-Shift-R (במחשב מק: ⌘-Shift-R).
- אינטרנט אקספלורר / אדג': להחזיק את המקש Ctrl בעת לחיצה על רענן (Refresh) או ללחוץ על צירוף המקשים Ctrl-F5.
- אופרה: ללחוץ על Ctrl-F5.
"use strict";
$(function() {
function createSlideshow(index, galleryDiv) {
var fadeOutRate = window.GSL_fadeout || 800,
fadeInRate = window.GSL_fadeoin || 800,
slideShowDelay = window.GSL_delay || 4000,
$gallery = $('ul.gallery', galleryDiv),
allImgAnchors = $('ul.gallery > li > div > div > div > a.image', galleryDiv),
allCaptions = $('ul.gallery > li div.gallerytext', galleryDiv),
radiosDiv = $('.gallery-slideshow-radios', galleryDiv),
radioTemplate = $('.gallery-slideshow-radio', galleryDiv),
oneSlideTemplate = $('.gallery-slideshow-slide', galleryDiv),
allSlides = [],
allRadios = [],
slideShow,
currentSlide,
timer,
tipsyOptions = {
title: tipsyTooltip,
html: true,
delayIn: 500,
fade: true,
delayOut: 0
},
buttonOptions = {
last: {index: -1},
first: {index: 0},
next: {offset: 1},
prev: {offset: -1},
play: {tooltip: 'החל מצגת תמונות', action: playButtonClicked},
stop: {tooltip: 'עצור מצגת תמונות'}
};
function quadrant(elem, x) {
x -= elem.offset().left;
return Math.floor(4.0 * x / elem.width());
}
function makeOneSlide(index) {
var anchor = allImgAnchors[index],
caption = allCaptions[index],
res,
image = $('img', anchor)
.click(imageClicked)
.mousemove(function(e) {
$(this).data({mouseloc: e.clientX});
})
.data({tiptype: 'image', index: index})
.tipsy(tipsyOptions);
radioTemplate.before(' ').before(
radioTemplate.clone()
.html(radioTemplate.html().replace('$NUM', (index+1)))
.data({index: index, tiptype: 'radio'})
.click(radioClicked)
.tipsy(tipsyOptions)
);
if (oneSlideTemplate.length) {
res = oneSlideTemplate.clone();
$('.gallery-slideshow-slide-image', res).append(image);
$('.gallery-slideshow-slide-caption', res).append(caption);
}
else
res = $('<div>', {'class': 'gallery-slideshow-slide'})
.append(image)
.append(caption);
return res.toggle(false);
}
function switchToSlide(i) {
function showNew(immediate) {
$('.gallery-slideshow-current-index', galleryDiv).text(1 + currentSlide);
$('.gallery-slideshow-radio', galleryDiv)
.removeClass('gallery-slideshow-radio-selected')
.filter(function() {return $(this).data('index') == currentSlide;})
.addClass('gallery-slideshow-radio-selected');
allSlides[currentSlide].fadeIn(immediate ? 0 : fadeInRate, function() {
slideShow.css({minHeight: slideShow.height(), minWidth: slideShow.width()})});
}
if (i == currentSlide)
return;
var previous = currentSlide;
currentSlide = (i + allSlides.length) % allSlides.length;
if (typeof previous == 'number')
allSlides[previous].fadeOut(fadeOutRate, showNew);
else
showNew(true);
}
function advance(step) { // step might be nagative.
return switchToSlide(next(step));
}
function next(offset) {
return (currentSlide + offset + allSlides.length) % allSlides.length;
}
function tipOfGotoImage(index) {
index = (index + allSlides.length) % allSlides.length;
return 'לתמונה ' + (index+1) + ':<br/>' + allCaptions[index].innerHTML;
}
function tipsyTooltip() {
var $this = $(this);
switch ($this.data('tiptype')) {
case 'image':
var imgnum = $this.data('index'),
mouseloc = $this.data('mouseloc');
switch (quadrant($this, mouseloc)) {
case 0: return tipOfGotoImage(next(1))
case 1:
case 2: return 'לדף הקובץ של התמונה';
case 3: return tipOfGotoImage(next(-1));
}
break;
case 'button':
var offset = $this.data('offset'),
index = $this.data('index');
return (typeof offset == 'number' && tipOfGotoImage(next(offset))) ||
(typeof index == 'number' && tipOfGotoImage(index)) ||
$this.data('tooltip');
break;
case 'radio':
return tipOfGotoImage($this.data('index'));
break;
}
}
function stopAnim() {
$(galleryDiv).stop(false, true);
clearInterval(timer);
$('.gallery-slideshow-play', galleryDiv).button('enable');
$('.gallery-slideshow-stop', galleryDiv).button('disable');
$('.tipsy').remove();
}
function imageClicked(e) {
stopAnim();
switch (quadrant($(this), e.clientX)) {
case 0: advance(1);
break;
case 1:
case 2: window.location = allImgAnchors[currentSlide].href;
break;
case 3: advance(-1);
break;
}
}
function radioClicked() {
stopAnim();
switchToSlide($(this).data('index'));
}
function playButtonClicked() {
stopAnim();
timer = setInterval(function() {
advance(1);
}, slideShowDelay);
$('.gallery-slideshow-play', galleryDiv).button('disable');
$('.gallery-slideshow-stop', galleryDiv).button('enable');
$('.tipsy').remove();
}
function buttonClicked(e) {
var button = $(this),
offset = button.data('offset'),
index = button.data('index'),
action = button.data('action');
stopAnim();
if (typeof offset == 'number')
advance(offset);
else if (typeof index == 'number')
switchToSlide(index);
else if (typeof action == 'function')
action();
}
function getButtonName(elem) {
for (var suffix in buttonOptions)
if (elem.hasClass('gallery-slideshow-' + suffix))
return suffix;
return {};
}
slideShow = $('.gallery-slideshow-div');
if (! slideShow.length)
slideShow = $('<div>', {'class' : 'gallery-slideshow-div'})
.insertBefore($gallery);
$gallery.toggle(false);
for (var i = 0; i < allImgAnchors.length; i++) {
var slide = makeOneSlide(i);
allSlides.push(slide);
slideShow.append(slide);
}
radioTemplate.toggle(false);
var buttonTemplates = $('.gallery-slideshow-button');
buttonTemplates.each(function(index, template) {
var $template = $(template),
buttonName = getButtonName($template),
text = $template.text(),
className = $template.attr('class');
$('<button>', {'class': className})
.insertBefore($template)
.button({label: text, text: false, icons: {primary: className}})
.click(buttonClicked)
.data($.extend({tiptype: 'button'}, buttonOptions[buttonName]))
.tipsy(tipsyOptions);
$template.remove();
});
switchToSlide(0);
stopAnim();
}
if ($('div.gallery-slideshow').length) {
mw.util.addCSS($('.gallery-slideshow-style').text());
mw.loader.using(['jquery.ui', 'jquery.tipsy'], function() {
$('div.gallery-slideshow').each(createSlideshow);
});
}
});