Making a slider for images and thumbnails
Posted: Sat Mar 15, 2014 11:23 pm
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
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