Simpleviewer Pro: Move Arrows To Each Sides of Thumbnail Rows

SimpleViewer offers a great way to display your photo albums on WordPress combined with NextGen Gallery in an easy to browse format. The arrows display out to the sides of the thumbnails when you only have one row configured however you must have the source code that comes with purchasing the product to modify the source and move the arrows to the sides if you have multiple rows of thumbnails configured. I figure it is worth the money if this is a gallery you are using as it would cost much more in time to develop the gallery yourself.

The default location of the arrows is shown below in the image.

The new location of the arrows is shown in the image below.

Not only will the SimpleViewer Pro version be required but also Adobe Flash will be required so if you do not have it you can download a 30 day free trial here. Follow the instructions below the modify the image caption location.

1. Open Options ActionScript: Open the ThumbArea.as file located in the simpleviewer_pro\source\com\airtightinteractive\apps\viewers\simpleViewer directory.
2. Modify Arrow Location Setting: Now modify the setting that decides if the arrows used to browse are displayed underneath the thumbnails or out to the sides. The if statement that needs to be modified starts with the following comment “//position thumb nav buttons”. Locate that comment in the ThumbArea.as and the default is listed below:
   js

   
   

   1. //position thumb nav buttons
   2. if (Options.fixedLayout){          
   3.      mBackBtn.setPosn(Options.backThumbArrowX,Options.backThumbArrowY);
   4.      mNextBtn.setPosn(Options.nextThumbArrowX,Options.nextThumbArrowY);
   5. }else{             
   6.      if (mRows == 1){
   7.       //for for 1 row, put arrows at same y as thumbs
   8.       mBackBtn.setPosn(- mBackBtn.width,(mHeight - mBackBtn.height)/2);
   9.       mNextBtn.setPosn(mWidth - Thumb.padding,(mHeight - mBackBtn.height)/2);              
   10.      }else if (mColumns == 1){
   11.       //for 1 column place arrows closer together
   12.       mBackBtn.setPosn(Thumb.thumbWidth/2- mBackBtn.width,mHeight);
   13.       mNextBtn.setPosn(Thumb.thumbWidth/2,mHeight);    
   14.      }else{            
   15.       mBackBtn.setPosn(Thumb.thumbWidth/2 - mBackBtn.width/2,mHeight);
   16.       mNextBtn.setPosn(mWidth - Thumb.thumbWidth/2 - mNextBtn.width/2 - Thumb.padding,mHeight);
   17.      }         
   18.  }

   Change it to the below which will add the arrows out to the side for 1,2, or 3 rows:

   js

   
   

   1. //position thumb nav buttons
   2. if (Options.fixedLayout){          
   3.      mBackBtn.setPosn(Options.backThumbArrowX,Options.backThumbArrowY);
   4.      mNextBtn.setPosn(Options.nextThumbArrowX,Options.nextThumbArrowY);
   5. }else{             
   6.      if (mRows == 1){
   7.       //for for 1 row, put arrows at same y as thumbs
   8.       mBackBtn.setPosn(- mBackBtn.width,(mHeight - mBackBtn.height)/2);
   9.       mNextBtn.setPosn(mWidth - Thumb.padding,(mHeight - mBackBtn.height)/2);              
   10.      }else if (mColumns == 1){
   11.       //for 1 column place arrows closer together
   12.       mBackBtn.setPosn(Thumb.thumbWidth/2- mBackBtn.width,mHeight);
   13.       mNextBtn.setPosn(Thumb.thumbWidth/2,mHeight);
   14.      }else if (mRows == 2){
   15.       //for for 4 rows, put arrows at same y as thumbs
   16.       mBackBtn.setPosn(- mBackBtn.width,(mHeight - mBackBtn.height)/2);
   17.       mNextBtn.setPosn(mWidth - Thumb.padding,(mHeight - mBackBtn.height)/2);      
   18.      }else if (mRows == 3){
   19.       //for for 5 rows, put arrows at same y as thumbs
   20.       mBackBtn.setPosn(- mBackBtn.width,(mHeight - mBackBtn.height)/2);
   21.       mNextBtn.setPosn(mWidth - Thumb.padding,(mHeight - mBackBtn.height)/2);      
   22.      }else{            
   23.       mBackBtn.setPosn(Thumb.thumbWidth/2 - mBackBtn.width/2,mHeight);
   24.       mNextBtn.setPosn(mWidth - Thumb.thumbWidth/2 - mNextBtn.width/2 - Thumb.padding,mHeight);
   25.      }         
   26.  }

   Notice the additions of the second and third “else if” statements. If you want to add the arrows to the sides for a different amount of rows then simply change the 2, 3, or add more “else if” statements.

3. Publish New SWF: Now republish the .fla file to generate a new .swf file. This can be completed by opening Adobe Flash and navigating to the simpleviewer_pro\source folder and opening simpleviewer.fla. Now click on File in the top navigation menu and select Publish from the drop down. This will generate a new viewer.swf file located in the simpleviewer_pro\web directory.
4. Upload SWF File: Now upload the new viewer.swf file to your web server under the wp-content/plugins/nggflash-swf folder to push the changes live on your server.

You should now be able to refresh any of your image galleries using SimpleViewer and immediately see the change to the arrow location. If the arrows still appear in the same location the chances are that your browser has cached the older file so clear your browser cache and try again.