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?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.