Page 1 of 1

Scroll to top (anchor)?

Posted: Sun Mar 04, 2018 7:37 pm
by tedwardson
I am sorry Norman, I asked this question for Dynamic Images and I should have asked it for Magic Zoom Plus. Anyway, the same request: I have a client who has expanded the number of images. On some products there are so many that the page on mobile is very tall. Is there a way I can add an automatic scroll to top of the page when the thumbnails are clicked?

Re: Scroll to top (anchor)?

Posted: Sun Mar 04, 2018 9:20 pm
by norman
This can be done too.

For this we need 2 things.

1) The visible jQuery plugin from https://github.com/customd/jquery-visible.
I've attached a Zipped copy of the only file you need (see the bottom of this post).
UnZip it into your Site folder.

2) Some code to activate this before Magic Zoom Plus changes the main image.
Go to Design / Library / Layouts / Javascript Header Functions / Standard JavaScript Header Functions.
Look for the line:

Code: Select all

<actinic:variable name="MagicZoomImages" value="Magic Zoom Support" />
Immediately after it put:

Code: Select all

<script type="text/javascript" src="jquery.visible.js"></script>
<script type="text/javascript">
// this code must be placed after the "Magic Zoom Support" line
// scroll main image into view if not visible before swapping image
$(document).ready(function(){
	$( "a[data-zoom-id]" ).click(function(){
		var swapimage = $( "#" + $(this).attr('data-zoom-id') );
		if ( ! swapimage.visible() )
			{
			$('html, body').animate({
				scrollTop: swapimage.offset().top
				}, 250);			
			}
		return true;
		});
});
</script>
The 250 in the above code is the time (milliseconds) to take to scroll to the main image. Adjust this to taste.

Re: Scroll to top (anchor)?

Posted: Mon Mar 05, 2018 12:47 am
by tedwardson
Thanks Norman. I am not finding 'onZoomReady': function(zoom_id){MagicZoom.switchTo(zoom_id, 0);}, in "Design / Library / Layouts / Zoom Image Layout / Magic Zoom Support "

Perhaps I have an older version?

Re: Scroll to top (anchor)?

Posted: Mon Mar 05, 2018 2:18 am
by norman
Hi,

I have a better way now that doesn't involve any patches to layout Magic Zoom Support and scrolls to the image before it changes. It will thus continue to work if Magic Zoom Plus is updated or re-installed. I've updated my earlier post to use this code.

If you've made changes to the layout Magic Zoom Support, these should be undone. You can also do this by re-importing partial site design MagicZoomPlusMultiImageV3Responsive.acd which should be in your Site folder.

Re: Scroll to top (anchor)?

Posted: Mon May 14, 2018 12:15 pm
by BenjaminG
Hi Norman, what you're saying is use the code from your post above? I want to be sure so I don't mess anything up in the process. Cheers.

Re: Scroll to top (anchor)?

Posted: Mon May 14, 2018 2:54 pm
by norman
Benjamin - all you need to do to add this to an existing Magic Zoom Plus site is to follow my post of 04 Mar 2018 09:20 pm.

You're not making any changes to the Magic Zoom Plus add-on and it's easy to undo if required.