Solved

Magnific Popup

Posted on 2013-10-28
5
1,408 Views
Last Modified: 2013-10-30
Need help configuring Magnific Popup script. I've created several popup galleries that work perfectly, but client wants them to end after last slide and close automatically. The developer says it's possible and told me to refer to his API docs. All that needs to be done, he says, is add a callback event that "checks for curr item index in 'change' callback, and if it went on second circle - close the popup." But there are no examples of the script that does this, and I don't know jQuery well enough to figure out the syntax on my own. This is the script that goes with each gallery, and the callback event should be added to it...

	<script>
	$(document).ready(function() {
		$('.mro').magnificPopup({
			delegate: 'a',
			type: 'image',
			closeBtnInside: true,
			tLoading: 'Loading image #%curr%...',
			mainClass: 'mfp-fade',
			gallery: {
				enabled: true,
				navigateByImgClick: true,
				preload: [1,6],
				Counter: '<span class="mfp-counter">%curr% of %total%</span>'
			},
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
				titleSrc: function(item) { return item.el.attr('title') + '<small>Maintenance, Repair and Overhaul</small>'; }
			}
		});
	});
	</script>

Open in new window

0
Comment
Question by:dsdny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39608202
Hi,
could you please add your existing HTML source of the page as well or provide a link to a page where we can check and test?

At least this script works on my machine:
		<script type="text/javascript">
			var hasEndBeenReached = false;
			$(document).ready(function() {
				$('.mro').magnificPopup({
					delegate: 'a',
					type: 'image',
					closeBtnInside: true,
					tLoading: 'Loading image #%curr%...',
					mainClass: 'mfp-fade',
					gallery: {
						enabled: true,
						navigateByImgClick: true,
						preload: [1,6],
						Counter: '<span class="mfp-counter">%curr% of %total%</span>'
					},
					image: {
						tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
						titleSrc: function(item) { return item.el.attr('title') + '<small>Maintenance, Repair and Overhaul</small>'; }
					},
					callbacks: {
						change: function() {
							if (this.index==(this.items.length - 1) && hasEndBeenReached==false) {
								hasEndBeenReached = true;
							}
							
							if (hasEndBeenReached == true && this.index<(this.items.length - 1)) {
								hasEndBeenReached = false;
								this.close();
							}
						}
					}
				});
			});
		</script>

Open in new window


HTH
Rainer
0
 

Author Comment

by:dsdny
ID: 39608699
Advancing forward works perfectly and closes correctly after that final image. The only problem I can see is that if you advance back it shows the first image before image 1, then closes. Can it close without showing image -1?  All of the code is available if you view source. You can check the test here:
http://loar.dsdny.com/products/

Open in new window

.
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39609206
Hi,
sorry - I fully forgot this.

Here an adjusted version:
		<script type="text/javascript">
			var hasEndBeenReached = false;
			var hasBeginBeenReached = false;
			
			$(document).ready(function() {
				$('.mro').magnificPopup({
					delegate: 'a',
					type: 'image',
					closeBtnInside: true,
					tLoading: 'Loading image #%curr%...',
					mainClass: 'mfp-fade',
					gallery: {
						enabled: true,
						navigateByImgClick: true,
						preload: [1,6],
						Counter: '<span class="mfp-counter">%curr% of %total%</span>'
					},
					image: {
						tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
						titleSrc: function(item) { return item.el.attr('title') + '<small>Maintenance, Repair and Overhaul</small>'; }
					},
					callbacks: {
						change: function() {
							if (this.index==(this.items.length - 1) && hasEndBeenReached==false) {
								hasEndBeenReached = true;
							}
							
							if (hasEndBeenReached == true && this.index==0) {
								hasEndBeenReached = false;
								this.close();
							}
							
							if (this.index==0 && hasBeginBeenReached==false) {
								hasBeginBeenReached = true;
							}
							
							if (hasBeginBeenReached == true && this.index==(this.items.length - 1)) {
								hasBeginBeenReached = false;
								this.close();
							}
							
							if (this.index<(this.items.length - 1) && this.index >0) {
								hasBeginBeenReached = false;
								hasEndBeenReached = false;
							}
						}
					}
				});
			});
		</script>

Open in new window


Please double test this - I am currently very busy with my daily job so my testing has been somehow limited.

Thanks and HTH
Rainer
0
 

Author Closing Comment

by:dsdny
ID: 39609300
Thanks Rainer! A perfect solution.
0
 

Author Comment

by:dsdny
ID: 39612196
Rainer, one of our clients is wondering if the 'Back' button on his web browser (probably IE8) can be used to close the popup without going to a new page. I've explained that the popup is not a page, so the back button will only take him to his previously viewed page (for him, usually Home). I'm guessing that a script could be written to affect the behavior of the back button of a browser, and that you'd probably need to customize the script for each individual browser. Is this true?
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question