Improve company productivity with a Business Account.Sign Up

x
?
Solved

Magnific Popup

Posted on 2013-10-28
5
Medium Priority
?
1,655 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
  • 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 2000 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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a pageā€¦
This article discusses how to create an extensible mechanism for linked drop downs.
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)

608 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