Scroll to top (anchor)?
-
- Posts: 4
- Joined: Sat Feb 02, 2013 9:04 am
Scroll to top (anchor)?
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)?
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:
Immediately after it put:
The 250 in the above code is the time (milliseconds) to take to scroll to the main image. Adjust this to taste.
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" />
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>
- Attachments
-
- jquery.visible.zip
- (1.24 KiB) Downloaded 843 times
Norman
-
- Posts: 4
- Joined: Sat Feb 02, 2013 9:04 am
Re: Scroll to top (anchor)?
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?
Perhaps I have an older version?
Re: Scroll to top (anchor)?
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.
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
Re: Scroll to top (anchor)?
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 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.
Last edited by BenjaminG on Mon Feb 06, 2023 4:19 pm, edited 3 times in total.
Re: Scroll to top (anchor)?
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.
You're not making any changes to the Magic Zoom Plus add-on and it's easy to undo if required.
Norman