Scroll to top (anchor)?

Integration of Magic Zoom Plus from http://www.magictoolbox.com with Actinic.
Post Reply
tedwardson
Posts: 4
Joined: Sat Feb 02, 2013 9:04 am

Scroll to top (anchor)?

Post by tedwardson » Sun Mar 04, 2018 7:37 pm

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?

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post by norman » Sun Mar 04, 2018 9:20 pm

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.
Attachments
jquery.visible.zip
(1.24 KiB) Downloaded 49 times
Norman

tedwardson
Posts: 4
Joined: Sat Feb 02, 2013 9:04 am

Re: Scroll to top (anchor)?

Post by tedwardson » Mon Mar 05, 2018 12:47 am

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?

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post by norman » Mon Mar 05, 2018 2:18 am

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.
Norman

BenjaminG
Posts: 1
Joined: Mon May 07, 2018 10:53 am

Re: Scroll to top (anchor)?

Post by BenjaminG » Mon May 14, 2018 12:15 pm

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.

norman
Site Admin
Posts: 1233
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post by norman » Mon May 14, 2018 2:54 pm

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.
Norman

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests