insert image dynamically

I have a good solution from Rainer Jeschor at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28651880.html (see zipped file).

The default.html in this folder has two <a> tags. Thy open EEDynamicImage.html and depending which <a> tag is clicked on, inserts the respective image to EEDynamicImage.html.

Question: How can I apply jQuery or bootstarp to jazz it up a bit.

Right now, it opens off center with not much tech used in the process. What are good way of doing this. I may also need to pass the image box size, margin, etc. dynamically but handling all these attributes dynamically could be handled in a new question later on.
Dynamic-Image.zip
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
There are dozens of ways to apply the script to a real world situation. Since you mentioned bootstrap, here's the script (altered slightly) applied to a standard bootstrap template (sticky footer).
TempSite.zip
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Tom,

Thank you for solution.

Why I want to have a dynamic page like this: I have about 10 images to display. if I use image_1.html, image_2.html, ... image_10.html, there will be too many pages to store and work with. I can use single blank page but the image shows up in the corner and cannot apply style to it. There is no other reason for this activity. So, I have revised the solution and uploaded back.

The image shows up in the center which is good. What I am looking for in this question is to have some image-opening-effect (like those in MovieMaker transition for example). Something nice not drastic. One that comes to mind the image shows up like pieces of shattered glass the pieces moves together to for the final picture. I am not necessarily asking for this. Anything descent with similar behavior.

In my next question I will be looking to pass images sizes or better yet take the 100% .png file sizes.

Question: How can I apply image-open effect described above?

Thanks,

Mike
TempSiteRev-1.zip
0
Tom BeckCommented:
So the only purpose for EEDynamicImage.html is to display a single image? You could just load it into a modal on click of a thumbnail. Check out FancyBox, LightBox or even ColorBox.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.