| View previous topic :: View next topic |
| Author |
Message |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
 Posted: Fri Sep 07, 2007 12:16 pm Post subject: Instant Popup pictures |
|
Easily have popup pictures on your book pages:
These pictures show a thumbnail... and when the reader puts the mouse cursor over the picture, it pops up an enlargement to the right.
Things to know:
1. Only displays perfectly with "landscape" images. "Landscape" is a old photographers term which means they are wider than they are tall.
2. However, it will work with any image, "portrait" too, ("Portrait "means taller than they are wide)... but those will be distorted.
3. It automatically enlarges (or reduces) pics, so they all display the same size.
4. . Because of the enlargement feature, you don't have to host big pics (unless you want to). It automatically enlarges all small "landscape" pics to the display size.
5. Because of the enlargement feature, you don't have to worry that your picture is too large. It automatically reduces giant "landscape" pics to the display size.
6. These display perfectly on your gallery pages.
7. The can also can be used anywhere in your book... but, on the side-by-side pages, they only display totally perfectly when the reeader puts the cursor on a page in the left panel (they can just use next or previous to position that way). If displayed when a page is in the right panel... the picture can't be seen in its entirety... but just click previous... and it works great.
8. This is important: You should paste this above any popup image or group of popup images: | Quote: | | <h4>Move cursor over "thumbnail pics" for larger view</h4> |
It will look like this:
Move cursor over "thumbnail pics" for larger view
Without that... your readers stand a chance of just passing your pop-ups by and wondering why you only had such tiny pictures on your page. WIthout a message to put the cursor over... they will miss out on this excellent feature.
Pastable code example:
Notice it's the same remotely hosted image url entered twice.
| Quote: | <span class="clear"><span class="pic">
<a class="p1" href="http://replace this with chapter, book or other url" ><img src="http://replace this with remote image url" width="150" height="100" title="Description of picture" />
<img src="http://replace this with remote image url" class="large" /></a>
</span></span> |
Last edited by ws on Sat Sep 08, 2007 5:56 pm; edited 4 times in total |
|
| Back to top |
|
 |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
| Posted: Fri Sep 07, 2007 2:30 pm Post subject: Enabling viewer to open original image in new window |
|
But, wait... there's more!
Add the ablitly to "Click on thumb to see original"
You can optionally make it so that your reader can click on your thumbnail and see the orginal, meanin your image in its' exact format (size), as you have it hosted remotely.
Currently (the standard way), it works like this. When a viewer clicks on the thumbnail (as opposed to just putting his cursor over it), our suggested code has it where the reader will merelygo back to the start of your book. That is just done to keep the special feature live. So, if you don't want the "click and open in new window" option, then . just in case they do click on it... your reader will be kept on your book website.
Following, we illustrate how you can implement the option of making such a click open the original image (at the remote hosted location). It will show in a new window exactly in the size and resolution the way it is hosted (like the Click Pic feature does).
What this feature does:
1. This gives all the features of click pic, plus the pop up image.
2. If you had an absolutely monstrous pic... you can let your readers view it (in a new window).
3. In your text you could explain something like this to your reader:... | Quote: |
To see a giant, (perhaps bigger than your screen), pic, click directly on the thumbnail. To onlysee a popup preview, just place your cursor over the thumbnail |
Pastable code:
| Quote: | <span class="clear"><span class="pic">
<a class="p1" href="http://replace this with remote image url" target="_blank"> <img src="http://replace this with remote image url" width="150" height="100" title="Description of picture" />
<img src="http://replace this with remote image url" class="large" /></a>
</span></span> |
Please take note: Your remote image url is in that code three times.
1. The first instance of the image url is to enable what happens when the thumb is clicked (opens original in new window).
2. The second instance of the image url is to display it as a thumbnail on your bookpage.
3. The third instance of the image is to display the popup enlargement to the right of the thumbnail. |
|
| Back to top |
|
|
|
|
|
Search