Making a slider for images and thumbnails

Post Reply
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

There have been many posts to make thumbnail menus be it for the standard or pro editions of Pano2VR, the non pro will also work with the standard, pro and studio editions of Object2VR.

To make the thumbnails you can just use images or follow the below posts to make thumbnails:
Object2VR (all versions) and Pano2VR: http://ggnome.com/forum/viewtopic.php?f=17&t=9040
Pano2VR Pro: http://ggnome.com/forum/viewtopic.php?f=17&t=8611

The point of this is to slide images within a masking container, use large images and you end up with a slide show. Use small images and you have a thumbnail slider, the build process is the same of both.

First you need to prepare your images, for best results make them the same size.
The attached project uses pictures which are 400 x 300px to make the slide show and then 50 x 40 px to make the thumbnail slider.

Open the image_thumb_slider.p2vr file and then the image_thumb_slider.ggsk skin file.

The slide show has the images set in a row, the starting image has the position X/Y, 10/10.
As all the pictures are 400px wide the next will be 410/10, then 810/10 and finally 1210/10.
They are then placed in a container, which has the ID slider. This is the width of all the pictures but can be any width as you will not see it only the pictures. The slider is then placed in another container called mask. The Mask is the size of one picture and has the it’s attribute masking selected.

To move the slider element you need to add buttons, the project has two rectangles with the ID pic_left and pic_right which are being used as buttons.

The pic right button has the action:
Mouse Click => Change Relative Position => Offset X/Y (/Limit X/Y) -400/0/-1200/0 => Target: slider.

This action will move the container holding the pictures -400/0px with each click, moving the slider to the left. A positive number would slide it to the right. The next set of X/Y -1200/0 is the limit, in other words will not go past this so the slider will move 400px with each click until 1200px then it will stop.


The pic left button has the action:
Mouse Click => Change Relative Position => Offset X/Y (/Limit X/Y) 400/0/0/0 => Target: slider.

This will move the slider back 400px with every mouse click until it reruns back to the start position, 0/0.
To finish it off a rectangle is used as a background, in the attached project its ID is slideshow.


For the thumbnails, each image is 50 x 40px so 25 thumbnails in a strip will be 1250px wide.
The thumbnail slider will display 5 thumbnails at a time. The change relative position action will be -250/0/-2000/0.
You just need to add a mouse click open next panorama action to each thumbnail image pointing to each pano to make it functional.
Regards,
Hopki
Attachments
image_thumb_slider.zip
(2.48 MiB) Downloaded 2007 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
roomrotator
Posts: 12
Joined: Thu Oct 13, 2011 6:58 am

This is a great step towards what I am trying to accomplish, thanks for posting!

I am wondering if there is a way to make the scrolling function work by clicking and dragging the thumbnails with your finger (on mobile) or using the scrolling function on your mouse. I have built a tour outside of Pano2vr that functions almost exactly how I want it to, but I would love to be able to recreate the same thing completely within Pano2vr. Any idea if this is possible?

Here is a link to what I have done: http://www.coachella.com/2014virtualtour/

You can either click the small arrows at the far sides to scroll (which it sounds like is similar to the action in the skin you posted) or use scrolling on your mouse or your finger to swipe left or right.

Finally, I would love to be able to show and hide the strip if possible.

THANKS!!

_andrew
SLOrobio
Posts: 1
Joined: Fri Aug 14, 2015 10:40 am

Dear Sir,
I am very interested in making your slider and I tried to do . My problem is that I find the action Change Relative Position. In the version I have, V.3.1.4 , the only options are to change position: Set Position Element , Element Change Position, Position Toggle Element , and makes a unique movement clicking . The question is : is it possible that in my version there is the option Relative Position Change ?. Thank you.
Best regards.
Carlos.
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Carlos,
The action Change Relative Position was introduced in version 4.
Version 5 now does this even easier with node images, cloners and scroll areas.
If your using Pano2VR 5 Pro open the component tool box and you will see a thumbnail component you can just drag out into the skin editor. This will auto populate all the images and link to the relevant nodes.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Niki
Posts: 10
Joined: Thu Jun 15, 2017 3:39 pm

Hey Hopki, I know it has been some years, but i am trying to have a scrollable thumbnail menu with left and right arrows... i am on 5.2.3 pro and using the thumbnail component from the toolbox as you suggested, but i can't implement the buttons... i just can't find the "change relative position" action... any help would be greatly appreciated...Thanks
Niki
Posts: 10
Joined: Thu Jun 15, 2017 3:39 pm

OK i found out that it is now under action: Mause Click => Position => Change Relative position. I selected the Cloner as Target but now i have the problem that when i scroll using the arrows, the scroll bar does not move. So for example it is not possible to scroll in one direction with the arrows and then back with the scrollbar/Magic mouse. Am i doing something wrong, could i maybe select something else as target? thanks...
Post Reply