Topic: Hyperlinking Main Images (SOLUTION)

After searching for a simple solution to the fact that SimpleViewer Pro *cough* doesn't have the ability to hyperlink the main images in the gallery, I decided to just edit the script myself.  For those of you who have something better to do with your evenings: here you go!

A few notes: 

1) I shifted the image navigation arrows off the edges of the main image so that the entire image could be clickable, this should be pretty easy for you to change back.

2) the hit areas for the two image navigation arrows were originally defined based on the maximum image area (or so it would appear)  I redefined the sizes so that they are now based on the size of the current main image, and relocated the code segment so that I could be sure it would execute every time a new image was loaded.

3) Even though I do expect you to know how to use flash and follow simple directions, I am trying to make this as easy as possible. So, for those of you who are more advanced, sorry for dumbing it down. 

Now on to the good part:

First off, My solution utilizes a movie clip on the stage in order to generate the clickable area over the picture.  To do this:

1 ) open up simpleviewer.fla
2 ) open the Library
3 ) under "navigation buttons" right click either "ImageBackButton" or "ImageNextButton" and click "Duplicate"
4 ) in the Name box type "ImageClickArea" (without quotes), make sure the "Export for ActionScript" and "Export in first frame" boxes are checked, then click "ok"
5 )Now double-click the Symbol next to ImageClickArea in your library to open it up on the stage
6 )make sure that you have the "arrow" layer selected in the timeline, click on the white box arrow on the stage and press delete.
7 ) click on "Scene 1" above the stage to return to scene 1
8 ) click on frame 15 in the third layer (items to load) in the timeline window, and you should see a bunch of items on the stage.
9 ) drag and drop the ImageClickArea symbol out of your library and onto the stage.
10 ) save the simpleviewer.fla file. (make sure to use "save as" and save it as a Flash 8 document if you are using a newer version of flash)

Now on to the action script edits:

This requires changes in the following actionscript files:

ImageArea.as
XMLManager.as

they are located in the following directory in the simpleviewer extraction:

sourcecomairtightinteractiveappsviewerssimpleViewer

Changes to XMLManager.as:

after the following three lines of code:

    public var imageCount:Number;  
    public var imageFileNames:Array;
    public var imageCaptions:Array;    

add this line to create a new array to hold the hyperlink addresses:

    public var imageFullLinks:Array;  //create array var to hold the links
after the following three lines of code:

        imageCount = 0; 
        imageFileNames = [];
        imageCaptions = [];    

add this line to initialize the new array:

        imageFullLinks = []; //initialize empty array for links
after the following three lines of code:

    var resultNode:XMLNode = xmlRoot.childNodes[i];    
    imageFileNames.push(resultNode.childNodes[0].firstChild.nodeValue);
    imageCaptions.push(resultNode.childNodes[1].firstChild.nodeValue);

add this line to fill the new array with values from the xml file:

    imageFullLinks.push(resultNode.childNodes[2].firstChild.nodeValue); //pull the link from the third tag under the current images main tag in the XML file

Now save XMLManager.as

We just made it so that XMLManager.as is going to pull links from your gallery's xml file.  in order to do this you need to add tags to hold this information.  this changes the structure of image items in the xml as follows:

the original structure:

<image>
    <filename></filename>
    <caption></caption>
</image>

becomes:

<image>
    <filename></filename>
    <caption></caption>
    <link></link>
</image>

Now for the changes to ImageArea.as:

After the following three lines of code:

    private var mNextBtn:RolloverButton;
    private var mBackBtn:RolloverButton;        
    private var mPlayBtn:RolloverButton;

Add this line of code to create a new variable to handle our new button:

    private var mImageClickArea:RolloverButton; //create button to mask over the image to enable leftclick
After these three lines of code:

            mBackBtn = new RolloverButton(mButtonHolder_mc.mcBackBtn);            
               mBackBtn.doAction = Delegate.create(this, onClickBack);
               mBackBtn.setRGB(mXMLManager.imageFrameColor);

Add this code segment to initialize and set up behavior for our image linking button:

               //image left click *ari*
            mButtonHolder_mc.attachMovie("ImageClickArea","mcImageClickArea",mButtonHolder_mc.getNextHighestDepth());
            mImageClickArea = new RolloverButton(mButtonHolder_mc.mcImageClickArea);
            mImageClickArea.doAction = Delegate.create(this,openFullImage);
            //end image left click *ari*
Comment out (or delete) the following lines of code.  They control the size and location of the hit area for the image nav buttons and we are going to re-write them:

        mBackBtn.setHitPosn(0,0);
        mBackBtn.setHitSize(mWidth/3+fw,mHeight);        
        mNextBtn.setHitPosn(mWidth*2/3-fw,0);
        mNextBtn.setHitSize(mWidth/3+ fw,mHeight);
comment out (or delete) these two lines of code:

            mBackBtn.setBtnPosn(imgx - mBackBtn.clickShift,imgy + h/2  - btnW/2);        
            mNextBtn.setBtnPosn(imgx + w - btnW,imgy + h/2  - btnW/2);    

replace them with the collowing code segment which customizes the button positioning, hit area positioning, and hit area sizing for the image nav buttons as well as adding the hit area specifications for the new image hyperlink button:

            mBackBtn.setBtnPosn(imgx - btnW - mBackBtn.clickShift,imgy + h/2  - btnW/2);        //customize position of image back button
            mNextBtn.setBtnPosn(imgx + w,imgy + h/2  - btnW/2);        //customize position of image next button

            
            //image nav hit areas remain same size as imageArea *ari* customized hit positions and hit widths        
            mBackBtn.setHitPosn(imgx-w/3,imgy);
            mBackBtn.setHitSize(w/3,h);        
            mNextBtn.setHitPosn(imgx+w,imgy);
            mNextBtn.setHitSize(w/3,h);
            //image left click hit area *ari*
            mImageClickArea.setHitPosn(imgx,imgy);
            mImageClickArea.setHitSize(w,h);
            //end image left click hit area *ari*
after this code segment defining the openImageLink function:

    public function openImageLink(){
        getURL(mXMLManager.imagePath + mXMLManager.imageFileNames[mCurrentImageIndex],"_blank");    
    }

paste in the following function for opening the link when the image is clicked (if you want the link to load in the same window change the _blank to _self):

    //*ari* begin custom function to open the full size image
    private function openFullImage(){
        if (mXMLManager.imageFullLinks[mCurrentImageIndex] != null){
            getURL(mXMLManager.imageFullLinks[mCurrentImageIndex],"_blank");    
        }
    }
    //*ari* end custom function to open the full size image

now save your ImageArea.as file, go back to your simpleviewer.fla file and publish it.  the new swf should handle linking from the main images.

If anyone wants to make improvements, please go ahead.  In particular if anyone could alter svManager to handle the new fields, and post the code here, I'd appreciate it, otherwise I'll probably do so myself.

-haphun

Re: Hyperlinking Main Images (SOLUTION)

Hi,

thanks haphun! That's why we provide the source code so you can make your own mods.

Please be aware that SimpleViewer v2.0 now supports full image hyperlinks by setting the 'imageClickMode' pro option to 'OPEN_URL': http://www.simpleviewer.net/simpleviewe … #mainimage

Felix Turner
SimpleViewer Support Team.

Re: Hyperlinking Main Images (SOLUTION)

Thanks for the great step-by-step instructions.

That was the one thing I was missing for my shadowbox plugin.

If it's alright with you, I'd like to merge the changes I've made, and post some information.

integrating shadowbox into simpleviewer is pretty easy, but it does require some additional files, so I'll be posting those on my server.

That being said, if you would like some space to work to create a page that will explain your method on my site, I'd be happy to provide you some FTP credentials.

-David

Re: Hyperlinking Main Images (SOLUTION)

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.

http://spidertaffy.com/testdir/web/

This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

Re: Hyperlinking Main Images (SOLUTION)

is there anyway to have someone click the image and it go directly to the site (as this thread explains how to do) WITHOUT them having to change their flash security settings that allows / blocks urls from flash?

if not, it seems like a (unfortunately) useless thing, although if there is a way to get around this then it would be very useful.

Re: Hyperlinking Main Images (SOLUTION)

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.



This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

can you share your changes so that others can utilize them as well?

Also , can you resize the image so that when they click the image , it will be larger? This would be quite useful if so

Re: Hyperlinking Main Images (SOLUTION)

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.

spidertaffy com/testdir/web/

This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

I'm not the type of guy to get all touchy about thread hijacking  big_smile

I like your shadowbox implementation, you should definitely post the code here for those who want it.

Re: Hyperlinking Main Images (SOLUTION)

Will this allow me to link external websites to the images when clicked?

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.

spidertaffy com/testdir/web/

This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

I'm not the type of guy to get all touchy about thread hijacking  big_smile

I like your shadowbox implementation, you should definitely post the code here for those who want it.

Re: Hyperlinking Main Images (SOLUTION)

yes.  links can be relative or absolute, and external links work fine.  if you test the file locally you may get a pop-up telling you that the flash file is trying to access an external website, but once the file is live you should be fine.

Will this allow me to link external websites to the images when clicked?

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.

spidertaffy com/testdir/web/

This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

I'm not the type of guy to get all touchy about thread hijacking  big_smile

I like your shadowbox implementation, you should definitely post the code here for those who want it.

Re: Hyperlinking Main Images (SOLUTION)

Wow, thanks! This is just what I've been needing for a long time. Works great. One thing though...

How do I get the hand cursor to show when there is a link? I've attempted to modify the code to allow for this, but have been unsuccessful so far.

Thanks for your help!

Re: Hyperlinking Main Images (SOLUTION)

The test version was working with my images and links, but when I changed
the x,y of the image area and background color it no longer worked.  Any
thoughts?

E

Re: Hyperlinking Main Images (SOLUTION)

Hey djpm05,
I like what you did with http://spidertaffy com/testdir/web/
What changes did you make to haphun code to let you do this, I'm still having trouble with his code but hopefully soon will figure it out.
Thanks

Re: Hyperlinking Main Images (SOLUTION)

Thank you haphun for your wonderful discription.

I have one Question:
Is it possible to show the navbuttons for the Main Image
all the time?

This is a BIG Problem for me. Maybee a small for you ???

Greetings

Re: Hyperlinking Main Images (SOLUTION)

Panoramium,

To do this, open your options.as file in a text editor, and change the line of code that reads under //Main Image:

static var hideImageButtonsOnRollOut:Boolean = true; //Sets whether to hide the image navigation buttons when the mouse is not rolled over them

and change "true" to read "false" (without quotes)

Then republish.

Re: Hyperlinking Main Images (SOLUTION)

mkappy8,

it works !!!!! thanx

Re: Hyperlinking Main Images (SOLUTION)

mkappy8,

it works !!!!! thanx

how could it !??!
I've problem, the image does'nt change and can't click it ... sad(

Re: Hyperlinking Main Images (SOLUTION)

Hopefully this isn't going to hijack this thread...

Here's a finished version of your work, integrated with what I'm doing currently.

spidertaffy com/testdir/web/

This combines exactly step-for-step what you did, along with about 4-5 extra lines of code. smile

-David

I'm not the type of guy to get all touchy about thread hijacking  big_smile

I like your shadowbox implementation, you should definitely post the code here for those who want it.

Hi,

Any ideas on what is needed to be done in integrating shadowbox? The link doesn't work anymore..

Thanks!

Re: Hyperlinking Main Images (SOLUTION)

Sorry about that guys, got a bit busy with setting up a new server, etc.

Here's the how-to, with working example at the top.

I made sure to do a redirect so the previous link works.

http://spidertaffy.com/blog/?p=9

Let me know how this works for you, and please comment with examples, etc!

-David

Re: Hyperlinking Main Images (SOLUTION)

Anyone tried this yet? I am curious if I need to revise my instructions at all smile

Re: Hyperlinking Main Images (SOLUTION)

Great instructions on how to implement this mod!

I know nothing about actionscript but was able to follow this code and get it working successfully. 

What I can't seem to figure out how to do is to create a way to have text float over the center of the image when the user's mouse cursor hovers over the clickable main image area.  This would greatly aid in usability if the user received some visual queue that by clicking on the image it would take you some place related to that image.

For example, the text could read:  "View Entire Project" which would take the user to another gallery of related images of the picture originally clicked on.  When a user rolls out of the main image area, the text would disappear (like the way the navigation buttons behave).  I was able to use a movieclip by copying one of the navigation buttons but use some text rather than an arrow on it and I sucessfully got it to appear and disaappear when the mouse hovered over the image. 

I just couldn't for the life of me get it to move off of the coordinates 0,0 no matter what I entered using the "setPosn" function.  It would also render my clickable image area inoperable when the rollover feature was turned on.

My hacking is proving ineffective after one long day at it.  I'm sure it's some basic rookie mistake I'm making.





After searching for a simple solution to the fact that SimpleViewer Pro *cough* doesn't have the ability to hyperlink the main images in the gallery, I decided to just edit the script myself.  For those of you who have something better to do with your evenings: here you go!

A few notes: 

1) I shifted the image navigation arrows off the edges of the main image so that the entire image could be clickable, this should be pretty easy for you to change back.

2) the hit areas for the two image navigation arrows were originally defined based on the maximum image area (or so it would appear)  I redefined the sizes so that they are now based on the size of the current main image, and relocated the code segment so that I could be sure it would execute every time a new image was loaded.

3) Even though I do expect you to know how to use flash and follow simple directions, I am trying to make this as easy as possible. So, for those of you who are more advanced, sorry for dumbing it down. 

Now on to the good part:

First off, My solution utilizes a movie clip on the stage in order to generate the clickable area over the picture.  To do this:

1 ) open up simpleviewer.fla
2 ) open the Library
3 ) under "navigation buttons" right click either "ImageBackButton" or "ImageNextButton" and click "Duplicate"
4 ) in the Name box type "ImageClickArea" (without quotes), make sure the "Export for ActionScript" and "Export in first frame" boxes are checked, then click "ok"
5 )Now double-click the Symbol next to ImageClickArea in your library to open it up on the stage
6 )make sure that you have the "arrow" layer selected in the timeline, click on the white box arrow on the stage and press delete.
7 ) click on "Scene 1" above the stage to return to scene 1
8 ) click on frame 15 in the third layer (items to load) in the timeline window, and you should see a bunch of items on the stage.
9 ) drag and drop the ImageClickArea symbol out of your library and onto the stage.
10 ) save the simpleviewer.fla file. (make sure to use "save as" and save it as a Flash 8 document if you are using a newer version of flash)

Now on to the action script edits:

This requires changes in the following actionscript files:

ImageArea.as
XMLManager.as

they are located in the following directory in the simpleviewer extraction:

sourcecomairtightinteractiveappsviewerssimpleViewer

Changes to XMLManager.as:

after the following three lines of code&#58;

    public var imageCount&#58;Number;  
    public var imageFileNames&#58;Array;
    public var imageCaptions&#58;Array;    

add this line to create a new array to hold the hyperlink addresses&#58;

    public var imageFullLinks&#58;Array;  //create array var to hold the links
after the following three lines of code&#58;

        imageCount = 0; 
        imageFileNames = &#91;&#93;;
        imageCaptions = &#91;&#93;;    

add this line to initialize the new array&#58;

        imageFullLinks = &#91;&#93;; //initialize empty array for links
after the following three lines of code&#58;

    var resultNode&#58;XMLNode = xmlRoot.childNodes&#91;i&#93;;    
    imageFileNames.push&#40;resultNode.childNodes&#91;0&#93;.firstChild.nodeValue&#41;;
    imageCaptions.push&#40;resultNode.childNodes&#91;1&#93;.firstChild.nodeValue&#41;;

add this line to fill the new array with values from the xml file&#58;

    imageFullLinks.push&#40;resultNode.childNodes&#91;2&#93;.firstChild.nodeValue&#41;; //pull the link from the third tag under the current images main tag in the XML file

Now save XMLManager.as

We just made it so that XMLManager.as is going to pull links from your gallery's xml file.  in order to do this you need to add tags to hold this information.  this changes the structure of image items in the xml as follows:

the original structure&#58;

<image>
    <filename></filename>
    <caption></caption>
</image>

becomes&#58;

<image>
    <filename></filename>
    <caption></caption>
    <link></link>
</image>

Now for the changes to ImageArea.as:

After the following three lines of code&#58;

    private var mNextBtn&#58;RolloverButton;
    private var mBackBtn&#58;RolloverButton;        
    private var mPlayBtn&#58;RolloverButton;

Add this line of code to create a new variable to handle our new button&#58;

    private var mImageClickArea&#58;RolloverButton; //create button to mask over the image to enable leftclick
After these three lines of code&#58;

            mBackBtn = new RolloverButton&#40;mButtonHolder_mc.mcBackBtn&#41;;            
               mBackBtn.doAction = Delegate.create&#40;this, onClickBack&#41;;
               mBackBtn.setRGB&#40;mXMLManager.imageFrameColor&#41;;

Add this code segment to initialize and set up behavior for our image linking button&#58;

               //image left click *ari*
            mButtonHolder_mc.attachMovie&#40;"ImageClickArea","mcImageClickArea",mButtonHolder_mc.getNextHighestDepth&#40;&#41;&#41;;
            mImageClickArea = new RolloverButton&#40;mButtonHolder_mc.mcImageClickArea&#41;;
            mImageClickArea.doAction = Delegate.create&#40;this,openFullImage&#41;;
            //end image left click *ari*
Comment out &#40;or delete&#41; the following lines of code.  They control the size and location of the hit area for the image nav buttons and we are going to re-write them&#58;

        mBackBtn.setHitPosn&#40;0,0&#41;;
        mBackBtn.setHitSize&#40;mWidth/3+fw,mHeight&#41;;        
        mNextBtn.setHitPosn&#40;mWidth*2/3-fw,0&#41;;
        mNextBtn.setHitSize&#40;mWidth/3+ fw,mHeight&#41;;
comment out &#40;or delete&#41; these two lines of code&#58;

            mBackBtn.setBtnPosn&#40;imgx - mBackBtn.clickShift,imgy + h/2  - btnW/2&#41;;        
            mNextBtn.setBtnPosn&#40;imgx + w - btnW,imgy + h/2  - btnW/2&#41;;    

replace them with the collowing code segment which customizes the button positioning, hit area positioning, and hit area sizing for the image nav buttons as well as adding the hit area specifications for the new image hyperlink button&#58;

            mBackBtn.setBtnPosn&#40;imgx - btnW - mBackBtn.clickShift,imgy + h/2  - btnW/2&#41;;        //customize position of image back button
            mNextBtn.setBtnPosn&#40;imgx + w,imgy + h/2  - btnW/2&#41;;        //customize position of image next button

            
            //image nav hit areas remain same size as imageArea *ari* customized hit positions and hit widths        
            mBackBtn.setHitPosn&#40;imgx-w/3,imgy&#41;;
            mBackBtn.setHitSize&#40;w/3,h&#41;;        
            mNextBtn.setHitPosn&#40;imgx+w,imgy&#41;;
            mNextBtn.setHitSize&#40;w/3,h&#41;;
            //image left click hit area *ari*
            mImageClickArea.setHitPosn&#40;imgx,imgy&#41;;
            mImageClickArea.setHitSize&#40;w,h&#41;;
            //end image left click hit area *ari*
after this code segment defining the openImageLink function&#58;

    public function openImageLink&#40;&#41;&#123;
        getURL&#40;mXMLManager.imagePath + mXMLManager.imageFileNames&#91;mCurrentImageIndex&#93;,"_blank"&#41;;    
    &#125;

paste in the following function for opening the link when the image is clicked &#40;if you want the link to load in the same window change the _blank to _self&#41;&#58;

    //*ari* begin custom function to open the full size image
    private function openFullImage&#40;&#41;&#123;
        if &#40;mXMLManager.imageFullLinks&#91;mCurrentImageIndex&#93; != null&#41;&#123;
            getURL&#40;mXMLManager.imageFullLinks&#91;mCurrentImageIndex&#93;,"_blank"&#41;;    
        &#125;
    &#125;
    //*ari* end custom function to open the full size image

now save your ImageArea.as file, go back to your simpleviewer.fla file and publish it.  the new swf should handle linking from the main images.

If anyone wants to make improvements, please go ahead.  In particular if anyone could alter svManager to handle the new fields, and post the code here, I'd appreciate it, otherwise I'll probably do so myself.

-haphun

Re: Hyperlinking Main Images (SOLUTION)

I added the capability for SimpleViewer to hide the link area when a link isn't present and figured I'd share. This comes in handy when you turn on the pointer cursor option or put a rollover image in the ImageClickArea.

In ImageArea.as
After this (starts on line 206):
        //hide image nav buttons
        mBackBtn.visible = mCurrentImageIndex > 0;
        mNextBtn.visible = Options.enableLooping || mCurrentImageIndex < mXMLManager.imageCount-1;       
        mPlayBtn.visible = Options.enableLooping || mCurrentImageIndex < mXMLManager.imageCount-1;   

Add this:
        //hide Image Click Area if there is no link --js
        mImageClickArea.visible = mXMLManager.imageFullLinks[mCurrentImageIndex] != null;

Re: Hyperlinking Main Images (SOLUTION)

Can this be a solution for selected images to open into a shopping cart???

Re: Hyperlinking Main Images (SOLUTION)

Yes, I'm in the middle of implementing something similar that opens modal window (shadowbox) which has purchasing options in it.

Mike Richards
SimpleViewer Support Team.

Re: Hyperlinking Main Images (SOLUTION)

Hi,

What's the status of your shopping cart implementation? We need a shopping cart also. Do you care to share your code?
Thanks

Regards,

Geert

Re: Hyperlinking Main Images (SOLUTION)

I'm using a fulfillment service so it was a little simpler, but basically I added a link to my image and a button that when clicked bring up a Modal window like lightbox or shadowbox. I pass some information about the image to the modal with php that is used for the checkout.

Look into either popping up a modal or linking to another page. Pass the information you would need such as the image name or product ID to the new page.

If you are using a  ecommerce  app look at how you can call the page containing the product via a link. You could add another XML property that contains the that like and use that as your main image link.

Mike Richards
SimpleViewer Support Team.