• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1598
  • Last Modified:

Magnific Popup

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
dsdny
Asked:
dsdny
  • 3
  • 2
1 Solution
 
Rainer JeschorCommented:
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
 
dsdnyAuthor Commented:
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
 
Rainer JeschorCommented:
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
 
dsdnyAuthor Commented:
Thanks Rainer! A perfect solution.
0
 
dsdnyAuthor Commented:
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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now