Solved

Magnific Popup

Posted on 2013-10-28
5
1,332 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 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Understanding Trigger in Jquery 10 51
Return data with AJAX, JQUERY and PHP 13 56
SharePoint 2013 List with Ratings 6 36
jQuery Validate 4 20
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now