Scrollable or zoomable Fancybox

[notsop]

Hello Forum. New user here.Sorry for the newbie question but some of our product images are quite large and Fancybox or Able resizes them so that they will fit on the screen. Does anyone have any experience changing this so that the images are scrollable inside the fancybox? Any help would be very much appreciated.

[Katie]

The images are scrollable, but there is one minor issue with that. When you click on the main product image, the scrolling doesn't activate. However, when you click on any of the gallery thumbnail images, the scrolling works fine.

A bug report was opened recently. This is what we know after initial investigations -

This is the default fancy box behavior to not show the navigation links when there is only one image. It works on the hyperlink rel attribute and show the navigation and requires more than one image links with the rel attribute. Since we have one main image, therefore, it isn't showing navigation links.

One solution to this issue is to define an empty hyperlink with the same rel attribute and load the next image from the available thumbnails in href attribute. This way it will display the navigation links which load the next image when clicked.

At this time, we are looking into an alternate solution to replace "fancy box" with something that has a better gallery along with the magnifying picture option. We all feel that the work-around is not a great solution to the problem.

Please let me know if you have any questions, and thanks for joining the forums! I hope you find that our community is helpful and responsive

Katie

[notsop]

That will work just fine.

Thank you Katie!

[Naveed]

You can do it by setting a couple of parameters while initializing the fancybox for product images, please follow these steps:

Open the ~/Website/ConLib/ProductImage.ascx control for editing and change the following lines of javascript code:

From:

Code: Select all

$('a.fancygallery').fancybox();
$(".fancybox-thumbs").fancybox();

To:

Code: Select all

 $("a.fancygallery").fancybox({
            aspectRatio : true,
            scrolling   : 'yes'
});
 $(".fancybox-thumbs").fancybox({
            aspectRatio : true,
            scrolling   : 'yes'
});