I have a iframe page, with a series of thumbnail buttons below the widget, to call a large number of images, each already on a separate transparent page. (too many to load all in one page)
What might be a simple way to code each button, so it will load the matching image page into my iframe (and replace the previously chosen image.) - essentially a gallery that loads selected external images quickly.
Also, where would I place this code?
thank you for any advice -
bob
Do you have a project we can see?
Mark - thank you for your response.
I hope the attached will make sense.
thanks again -
bob
bobnzach@yahoo.com
iframe-build.zip (453.3 KB)
Mark - thank you for your response.
I hope the attached will make sense.
Feel free to change anything in the file - it is just a rough start.
thanks again
Bob Millea
bobnzach@yahoo.com
echo-boy.com (build)
These are image & video URLs already on my site (under construction) that I hope to call up with the thumbnail buttons at the bottom.
I hope to load images, audio & video.
iframe-build.zip (453 KB)
Was just doing that…
This is just one way to do this… but should give you a general idea.
Give each button a class name that reflects the page it needs to direct to.
so for
http://echo-boy.com/art-joeseph.html
Give it’s button the class name joeseph
Point all buttons at a sing Hype javascript function.
Since you have layouts I added I used the layout name to try and get the correct iframe. Since you may have more than one …
//-- get the class name of the button
var thisButtonName = element.classList[1]
var iframeDocument = ""
//-- Assuming you have more than one layout with an iframe, each having unique IDS
if (hypeDocument.currentLayoutName() === 'largeLayout' ){
//-- get the inner iframe
var iframe = hypeDocument.getElementById('art1').querySelector('iframe')
iframe.src = 'http://echo-boy.com/art-' + thisButtonName +'.html'
}
art_mhv1.hype.zip (199.0 KB)
Mark - thank you so much. It works just as I hoped.
I will try tonight to continue what you’ve done with the file.
I’ll let you know if I I have a problem. ( I’m not good with code )
thanks again
Bob
Hi Bob!
As @MarkHunte mentioned there are often several ways to accomplish a given task.
Overview:
Here is another route that does not use JavaScript but instead uses just HTML.
Hype project: iFrame Gallery JHSv1.hype.zip (27.7 KB)
Details:
In the innerHTML of the HTML widget the “name” attribute has been assigned as “iFrame-a”.
<iframe src="http://echo-boy.com/art-head.html" name="iFrame-a" width="800" height="800" style="border:0px" scrolling="no"></iframe>
The following HTML markup is in each “thumbnail” button’s innerHTML. The thumbnail image is a link - but instead of going to a web page it loads that page into the “target” iFrame (e.g. “iFrame-a”) in the Hype project:
<a href="http://echo-boy.com/art-drugs.html" target="iFrame-a"><img src="${resourcesFolderName}/bttn-art2.jpg"></a>
Result:
Clicking on the button thumbnail that represents “art-drugs.html” will load that page into the assigned (target) HTML widget.
Note:
There is a far more efficient way to approach this problem if You are interested. An approach that allows You to change galleries without changing anything in the Hype project.
This is a good idea @JimScott ,
The main point I think though is that there are so many scenarios that a project can take that any and all methods of approach have merit depending on said scenarios.
We can use classes, ID, names, data attributes to solve issues that each throw up whether that be Layouts with similar elements for same use, Layouts with symbols and so on… We also can only use the name tag in a few situations.
For @JimScott’s approach,
One thing I would say is I always try and avoid editing within inner html on elements manually if I can. Just find it a pain in the arse and cannot clearly see what is going on. I personally would write a script to do it all for me or
would try and make the iFrame element a Persistent Symbol across scenes with one name. and use the button’s Actions inspector ‘On Mouse Click’ and ‘Go to Url’ to open a bookmarklet with the iframe as the target.
This is just to make editing easier and seeing what is what at a glance.
javascript:window.open("http://echo-boy.com/art-joeseph.html", "iFrame")
All good points... but I've never been wild about that little "URL" window & prefer the larger canvas of the "innerHTML" for the element.
Completely agree - but the OP indicated he was not good with code - so my goal was to offer another route to a solution.
Thank heavan we can do both… 
Jim - thank you for responding - both yours & Mark’s suggestions (and files) provided work well and should do the trick. I have some time to explore both directions - though I did mention i’m not strong with code, who knows, I might learn something.
again thank you Mark and Jim for your help
Bob Millea
bobnzach@yahoo.com
If You can swing the JavaScript that would be the best (and most flexible) route.
The Forum is here to help. 
BTW: What interesting images.
