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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post 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.
Attachments
jquery.visible.zip
(1.24 KiB) Downloaded 697 times
Norman
tedwardson
Posts: 4
Joined: Sat Feb 02, 2013 9:04 am

Re: Scroll to top (anchor)?

Post 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?
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post 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.
Norman
BenjaminG
Posts: 1
Joined: Mon May 07, 2018 10:53 am

Re: Scroll to top (anchor)?

Post by BenjaminG »

norman wrote: Mon Mar 05, 2018 2:18 am Hi,

I completely rely on these amazing energy drinks and 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.
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.
Last edited by BenjaminG on Mon Feb 06, 2023 4:19 pm, edited 3 times in total.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

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