Variable speed slideshow using Magnific

Been messing about creating a website with a light box slideshow of some images, and wanted it to have the option to automatically change image. I’d already found Magnific Popup which does an excellent job of the popup gallery bit, and a quick google got them automatically changing easily enough, but with my pretty much zero knowledge of javascript/jQuery etc I couldn’t for the life of me work out how to make it toggleable while the slideshow was going or change the speed.

A quick codecademy.com jQuery course later and I’ve got something that works, thought I’d chuck it up here so anyone else with a similar lack of knowledge can find something more useful when they google. People with more knowledge of this stuff may think its a terrible implementation, notes on improving it would be welcome 🙂

The page shows the first image when you open it. click it and the gallery pops up with the automatic progression on by default. Hit space at any time and it should pause. You can change the speed of the auto change with , & . (< & > but cant be arsed with shift! )

Only tested in chrome, not sure if the keycodes need changing for other browsers.

Hope someone finds it useful.


var MPTimer = 2000

var timer

var stopped = false

$(document).ready(function() {

$('.popup-gallery').magnificPopup({ delegate: 'a',type: 'image',tLoading: 'Loading image #%curr%...',

mainClass: 'mfp-img-mobile',callbacks: {

change:function(){ timer = setTimeout(function() {$.magnificPopup.instance.next()}, MPTimer)}

},

gallery: {enabled: true,

navigateByImgClick: true,

preload: [0,1] },

image: {tError: 'The image #%curr% could not be loaded.',titleSrc: function(item) {return item.el.attr('title') ;}}

});

$(document).keypress(function(e){

if (e.keyCode === 32) {

console.log('Space pressed');

if (!stopped){

stopped=true;

clearTimeout(timer);

} else {

stopped = false;

timer = setTimeout(function() {$.magnificPopup.instance.next()}, MPTimer)

}

}

else if (e.keyCode === 44) {

console.log('Comma pressed');

MPTimer=MPTimer*1.5

}

else if (e.keyCode === 46) {

console.log('Period pressed');

MPTimer=MPTimer/1.5

}

else{

console.log(e)

}

});

});

<br data-mce-bogus="1">


<html><head>

	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>

<style>body {background-color: #000000;} h2{color: white;} p{color: rgb(255,255,255);}</style>

</head><body>
<div id="main-wrapper">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div align="center">
<h2>test</h2>
<script type="text/javascript" src="script.js">

</script>

</div>
<div class="popup-gallery">

<a href="http://lorempixel.com/400/200/cats/1">
<div align="center"><IMG src="http://lorempixel.com/400/200/cats/1" ></div>
</a>

<a href="http://lorempixel.com/400/200/cats/2"></a>

<a href="http://lorempixel.com/400/200/cats/3"></a>

<a href="http://lorempixel.com/400/200/cats/4"></a>

<a href="http://lorempixel.com/400/200/cats/5"></a>

<a href="http://lorempixel.com/400/200/cats/6"></a>

<a href="http://lorempixel.com/400/200/cats/7"></a>

<a href="http://lorempixel.com/400/200/cats/8"></a>

<a href="http://lorempixel.com/400/200/cats/9"></a>

<a href="http://lorempixel.com/400/200/cats/10"></a>

</div>
</div>
</body></html>

Advertisements

1 Response to “Variable speed slideshow using Magnific”


  1. 1 jual bibit buah mamey sapote May 29, 2018 at 3:14 am

    Hey very cool blog!! Man .. Excellent .. Superb .. I’ll
    bookmark your website and take the feeds additionally?
    I’m happy to seek out numerous useful info right here in the
    post, we want develop extra techniques in this regard, thank you for sharing.
    . . . . .


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s




Advertisements

%d bloggers like this: