Solved

Magnific Popup

Posted on 2013-10-28
5
1,316 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks Rainer! A perfect solution.
0
 

Author Comment

by:dsdny
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

763 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

10 Experts available now in Live!

Get 1:1 Help Now