• Registered: 2009-02-21
  • Posts: 1

Topic: customize arrows

Hi guys, I'm a new user. Congratulaions for a great forum :D
I already check for this questions on the forum, but I did not resolve.

Is there any possibility to change the positions of the arrows (ImageNavButtons) and put them outside of the main image?

Many thanks for some help.

  • Registered: 2008-04-20
  • Posts: 104

Re: customize arrows

HI,

The only way to do this is to use the Fixed Layout option at the top of the Options.as set this to true. Now you can place the main image where ever you want it and also place the buttons "on the out side of the image. I just got finished doing this it took me a lot of trial and error to get things where I want them.

Once you have the main image where you want it using the x and y coordinates and the size you want say it is 580 in the "//Fixed Layout Positions" make the   "imageAreaWidth:Number = 780; //width of Image Area" and imageAreaHeight:Number = 780; //height of Image Area larger than the image size then in the "//XML Options Overrides" make the maxImageWidth:Number = 580 & maxImageHeight:Number = 580 the size of your image. This will place the buttons on the out side.

Hope this helps. All the best.

  • Registered: 2009-03-01
  • Posts: 6

Re: customize arrows

I am also trying to move the location of the nav arrows, and having trouble figuring it out.

My layout has the thumbnails to the right of the main image, and everything is aligned top.   i'd like the nav arrows to appear up at the top right corner of the image, and always in the same place.  so a user  doesn't have to keep moving their cursor to click through.

anyone know how to do this?

thanks!!! ;)

  • Felix
  • Site Admin
  • Offline
  • Registered: 2006-03-16
  • Posts: 4,395

Re: customize arrows

i'd like the nav arrows to appear up at the top right corner of the image, and always in the same place. so a user doesn't have to keep moving their cursor to click through.

The user doesn't need to keep moving his cursor. If you move your mouse over the image area you will notice the next image button hotspot area is the entire right 3rd of the image area.

Felix Turner
SimpleViewer Support Team.

Felix's Website

  • Registered: 2009-03-01
  • Posts: 6

Re: customize arrows

Oh, I suppose that is true!  silly me.

Still, visually, the arrow itself moves based on the image height and I'd like to place it at the top right of the image... that way it will be more visible to users with lower resolution (some of the photos are quite large).

is it possible?

  • Registered: 2009-03-03
  • Posts: 6

Re: customize arrows

I'm trying to figure out the same thing myself. I've searched the forum and one thread claims that editing options.as will move the arrows and another says it's in ImageArea.as. I've tried changing a lot of numbers but I haven't found the exact line of code yet.

All I'm trying to do is move the back arrow and hit area to the right about 260 pixels.

  • Registered: 2008-04-20
  • Posts: 104

Re: customize arrows

You can do this by working with the "Fixed Layout option".  Open the options.as in the source folder and where it says 

static var fixedLayout:Boolean = false

  change false to true. then scroll down the page until you come to "//Fixed Layout Positions"

static var imageAreaX:Number = 10; //X posn of Image Area
    static var imageAreaY:Number = 10; //Y posn of Image Area
    static var imageAreaWidth:Number = 480; //width of Image Area
    static var imageAreaHeight:Number = 480; //height of Image Area    
    static var thumbAreaX:Number = 500; //X posn of Thumb Area
    static var thumbAreaY:Number = 10; //Y posn of Thumb Area

in the imageAreaWidth:Number = 480; //width of Image Area and imageAreaHeight:Number = 480; //height of Image Area is where you change the max width of you image area so if you want the thumbs on the right all you have to adjust is the imageAreaWidth:Number = 480 (as an example only) your image is 200 pixles wide to put the thumbs at the 260 mark add 460 (to account for the 200pixle image) to the image area size. Remember that the image size is measured from the top left of the image.

To adjust the placement of the main image in the "//fixed layout" area go to

static var imageAreaX:Number = 10; //X posn of Image Area
    static var imageAreaY:Number = 10; //Y posn of Image Area

from there you can place it anywhere on the page.

I have done this and found that it is trial and error to get things just like you like but it will work.

Hope this helps.

  • Registered: 2009-03-03
  • Posts: 6

Re: customize arrows

Thanks for the info racerx. I tried changing the width value as you mentioned, but it only moved my whole swf over and not the arrows. I actually found it was a lot easier moving the main back and next arrows in the simpleviewer.fla file, then republishing. I'm still tweaking the hit area though.

  • Registered: 2008-04-20
  • Posts: 104

Re: customize arrows

Well I realize that I did not say what enlarging the imageAreaWidth:Number = 480; //width of Image Area would do. It just gives you gives you the a larger hit area space so you you have room on the stage to move the arrows where you like. This only affects the final published vewer.swf that you put on your site.

And working in the simpleviewer.fla was the way I finally moved mine after enlarging the imageAreaWidth:Number = 480

Does that help at all  :)

  • Registered: 2009-03-03
  • Posts: 6

Re: customize arrows

Yes, indeed it does help. Thank you so much!