| Not logged in - | |
| Not logged in - | |
| Moderated by: Jim | Page: 1 2 3   |
|
|||||||||||||
| Side panel pictures. - Software Assistance - WowUltra - WowUltra Forums | |||||||||||||||
| Author | Post | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||
|
Robert Member 
|
With all the help I have had I can manage them very well now with titles, links and mouseover but there's one last thing I would like to be able to do and that is have the picture shown enlarged when clicked on. Any ideas please.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder 
|
Robert wrote: With all the help I have had I can manage them very well now with titles, links and mouseover but there's one last thing I would like to be able to do and that is have the picture shown enlarged when clicked on. Any ideas please. Hi Bob, You might prefer to enlarge on mouse over rather than click. You can include your existing mouse-over text. That leaves the click free to go somewhere else. Something like this: http://www.templot.com/odds/dmu_barchester_ie.htm (best for IE) http://www.templot.com/odds/dmu_barchester.htm (best for Firefox) regards, Martin. Last edited on Thu Aug 14th, 2008 12:48 pm by martin_wynne |
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Jim Administrator 
|
Nice script Martin, here is the "clic on me" version in action http://columbusdieselsupply.com/tp9.php
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Jim wrote: Nice script Martin, here is the "click on me" version in action http://columbusdieselsupply.com/tp9.php Thanks Jim. The diesel catalogue requires Javascript, but my version* is pure css, no scripting.  The snag is that it works slightly differently in IE and Firefox. In IE the pop-up aligns to the top of the thumbnail. In Firefox it aligns to the bottom of the thumbnail. That's the great advantage of having web standards...  *Not really mine -- the original idea is from css guru Eric Meyer. Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
I wroteThe snag is that it works slightly differently in IE and Firefox. In IE the pop-up aligns to the top of the thumbnail. In Firefox it aligns to the bottom of the thumbnail. That's the great advantage of having web standards... I have edited my original to include versions optimized for each. Note that in Firefox you can click on the large image or the small one. In IE you can click only on the small one. Which means unfortunately that the Firefox-optimized version prevents clicking in IE. Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
I like both of those Martin but especially the one for IE. What's the code I have to enter, and where? Last edited on Thu Aug 14th, 2008 03:27 pm by Robert |
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: I like both of those Martin but especially the one for IE. What's the code I have to enter, and where? Ok bob, I will do some tests and find the easiest way for you to set it up. I think perhaps the best result would be for the image to appear in the middle, between your side columns. You could then run the mouse up and down the side columns to see all the pictures. It will probably need a slightly different version of the code for each side. This is all css by the way. The more conventional approach would be via scripting -- there are pros and cons for each. I'll do the css version and maybe someone else would provide a script? Then you can choose which you prefer. There is no way to include any permissions in the css, anyone who can see the small image will also be able to see the large one. Is that ok? But if the click link is to a forum topic, only registered members will be able to go there. Other visitors will go to the Register/Login page instead. At present anyone can see your side columns. regards, Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
Will this be as easy to add as the html I have been dealing with Martin or will it involve the dreaded cpanel? I don't mind visitors seeing the larger image, that's fine. It's only the internal links that don't work for visitors.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: Will this be as easy to add as the html I have been dealing with Martin or will it involve the dreaded cpanel? I don't mind visitors seeing the larger image, that's fine. It's only the internal links that don't work for visitors. Hi Bob, It's all easy HTML. I will provide some code you can just copy and paste in Admin. The tricky part is fine-tuning the code so that it looks good in both IE and Firefox -- you don't want images popping up where they look untidy. By the way, cpanel looks worse than it is.  Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
Thanks Martin that will be really great as there are going to be a lot of pictures on those side panels.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
I wrote: The tricky part is fine-tuning the code so that it looks good in both IE and Firefox -- you don't want images popping up where they look untidy. Hi Bob, Good news and bad news on the css mouse-over pop-ups. But first of all, I'm not so sure that these mouse-overs on the right-hand column are such a good idea. It means that every time you move over to use the scroll bar, you get a "flash" on the screen -- it's quite disconcerting. The standard title="" mouse-over has a time delay to avoid that, of course. Because of this, it would probably be better to put all the mouse-over images in the left-hand column, and use the right hand column for the Login menu, links to other sites, small images, logos and similar information. I had it working just fine in Firefox and Opera. You could scroll the page up and down regardless, and the image pops up in a fixed position on the screen. That method used fixed positioning for the pop-up. As usual, IE wrecked the whole thing. Fixed positioning appears to be unsupported, or at least not properly implemented in IE7. To make it work in IE I had to change from fixed to absolute positioning. That means it's referenced from the top of the page instead of the top of the visible area. That's a big annoyance because it means two things: 1. You must scroll to position the small image somewhere near the middle of the screen before doing a mouse-over, otherwise the pop-up will be partially out of view. 2. When entering the HTML you have to calculate/guess a suitable top dimension for each pop-up. For this reason it would be extremely desirable to set a fixed size for all the column boxes. Anyway, here is something for you to have a look at: http://www.templot.com/wowultra Mouse-overs on the left-hand column use absolute positioning and work in all browsers, but it's clunky as explained above. Mouse-overs on the right-hand column use fixed positioning. They work much better in Firefox and Opera, but not at all in IE. Try each side to see what happens. If all your members could be persuaded to change over to Firefox, the fixed position pop-up seems ideal. It can be set to be anywhere on the screen. The Firefox download and installation is very easy, it picks up your IE settings, and it's free. But somehow I think getting everyone to change is a tall order. Maybe seeing the mouse-overs fail would be an incentive? Let me know if this is usable for you. There are two other options if not: 1. Javascript pop-ups, as in many commercial sites. This could be on mouse-over or click, but it needs a click to remove it. It requires users to have Javascript turned on. 2. Click to open a separate web page containing the large image, or several images, and optionally some text, links and so forth. That's the more traditional web approach, using the browser's Back button to return to the forum. regards, Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
It would have to be IE causing the problem Martin as that is the most common browser on the forum, and as you have so rightly pointed out there is no way the members are going to change. They are railway modellers, and haven't the slightest interest in things computing. IE came with the computer and that's what they use. I have looked at your example and can see that it's of no use for pictures on both sides but that's what's going to happen. The members like them so much that there are going to be pictures almost top to bottom, both sides. I can't thank you enough for your efforts though as you shown me what is and isn't possible. What about the java road Martin? Do you think that would be better? Most folk seem to have java turned on. Number 2 is a no,no.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: What about the javascript road Martin? Do you think that would be better? Most folk seem to have javascript turned on. Number 2 is a no,no. Hi Bob, The usual javascript popup window is easy to do, but unfortunately it is very likely to be blocked by popup-blocker software on many of your members' systems. So I've been trying alternatives. I had a very elegant solution -- when the small image was clicked, the whole page slowly dimmed dark and the large image appeared in a bright panel in the centre of the screen. The background page could still be scrolled independently. It worked a treat in Firefox and Opera, but you can imagine what happened in IE -- page totally screwed up and unreadable. So I've tried something else using some software which I use for Help files. See what you think: http://www.templot.com/wowultra If you click a small picture the large one expands below it. You can click on the small picture again (not on the large picture) to shrink it back, or click the close button on the expanded panel. In addition there are buttons at the top of each column to expand and shrink all the pictures in the entire column in one go. It still requires more page scrolling than ideal, but it seems about the best that is possible in IE. I have prepared 4 typical pictures and put the same in both columns, obviously you won't be doing that. Those pictures are 600 pixels wide and it will require a wide-screen to have both columns expanded simultaneously without needing side-scrolling. 600 or 640 is probably the sensible limit for your members with smaller screens, and then they will want only one side expanded at a time. But there is no actual size limit if folks don't mind the scrolling. Note that the expanded panels can contain anything you want -- charts, diagrams, maps, lists, track plans, etc. It doesn't have to be an image. Users on slow dial-up may find the page slow to load when they first visit, although their browser should cache the images after that. There is a setting in the Admin to allow browser caching -- make sure it is turned on. Let me know if you want to go ahead with this and I will provide the full code details. It will need some pre-planning on your part to have all the picture links to hand, and each one needs to be given a unique reference code. You don't need to use cpanel, it can all be done in the Admin theme editor. regards, Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
That's brilliant Martin and I thank you for all the work you have obviously put in. For perfection I would mention two things I think. First and most important is it possible to have the picture at the side instead of underneath the original and for best results all round the picture size should be about 450 to make it good for every body. After all this is more for the benefit of non members really as all the members have the full size pictures available to them. The smaller picture size may of course fix the problem of sideways scrolling that occurs when the 600 picture is below the original. Perhaps the picture size is alterable in the script and then I could play with it myself?
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: First and most important is it possible to have the picture at the side instead of underneath the original and for best results all round the picture size should be about 450 to make it good for everybody. Hi Bob, Sure, the size of each picture is set in the script. Each one can be different. If you expand all of them the column expands to the widest. Otherwise it expands just enough for the picture which you expand. My suggestion of 600 width was simply for a maximum size. On my system this avoids sideways scrolling on screens above 1260 width. Most desktop systems are now 1280 width -- what size are you testing on? Your suggestion of putting the expanded image alongside the small one instead of below it seems counter-productive -- if the intention is to reduce the page width and minimize the need for sideways scrolling? A 450 image below the small one would surely be better in that regard?  But I've tried one for you to see, with a much smaller expanded image. See the bottom box on the left-hand column, "Postcard". Also I've added some embedded video on the top box on the right-hand column, just as an example of some things you might do. See: http://www.templot.com/wowultra I think though, that visitors will be either viewing the forum, or the contents of the left-hand column, or the contents of the right-hand column. Not trying to do all three things at once. If an entire column is expanded, it is possible to scroll sideways just the once and then view all the pictures by scrolling vertically. There's no doubt that the best answer is to use fixed positioning so that the expanded content appears in front of the page instead of being part of it. That's not available in IE without a lot of convoluted javascript, and the result is jittery and won't work for everyone. I believe the next version of IE will include proper fixed positioning at long last, but of course it could be years before all your members have upgraded to it. Or we could fall back to a standard javascript pop-up window, as commonly used for advertising. The problem there is that many members will have popup-blocker software which either prevents it appearing, or displays an alarming warning about it first. regards, Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
I have tried them all Martin and for me the Postcard one works the best. We don't have many members, if any, using the full capabilities of their monotors and of course some of the older setups won't even go to the higher resolutions. I myself am using 1152 X 864 which is best for me and the Postcard works very nicely at that. Once again thanks for all your work and it must be nice to know that your efforts are going to be enjoyed by so many people. Cheers. Bob
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: We don't have many members, if any, using the full capabilities of their monitors Hi Bob, Anyone using a flat-screen monitor should always set it to the native resolution, which is normally the highest available. Anything less will lead to very poor image quality. If text is too small, change the Windows dpi setting to 120dpi in the Display Properties dialog, don't change the monitor resolution down. That doesn't apply to older CRT (tube) monitors of course. it must be nice to know that your efforts are going to be enjoyed by so many people. Is that a yes -- you want to go ahead with this scheme? I think perhaps the best way to proceed would be for you to send me a few sets of data. I can then prepare a chunk of code for you to enter and try out, and you can see where everything goes in it. A set of data might typically comprise: ______________ A URL for the small image. A URL for the large image. If this is a very large image, do you want the browser to resize it, and if so to what width? A short title for the small image box. A title for the large image, if different (can be longer), and do you want it above or below the image? Some optional descriptive text. An optional destination URL for the click, and the wording for the click link or on the button. Options for the background colour, text size, text colour, etc. A dark background is usually best for pictures. The text can be on the same dark backgound, or the dark background can surround the image only. ______________ Note that you can put any chunk of HTML you like in the expanded panel -- multiple images, links, buttons, text, video, whatever. regards, Martin.
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
It's your example of the postcard that I like Martin. Each of the pictures has a title over it and the mouseover text is what I would like to appear if possible but are you saying that each of the pictures is going to need separate url's and all the other data. I ask because we are going to finish up with about 60 pictures, which will probably be changed on a regular basis and I can see my whole time being taken up with just that one job. Would it not be possible to have just a simple enlargement to 450 width when the picture is clicked on?
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
martin_wynne Licence Holder
|
Robert wrote: It's your example of the postcard that I like Martin. Each of the pictures has a title over it and the mouseover text is what I would like to appear if possible but are you saying that each of the pictures is going to need separate url's and all the other data. I ask because we are going to finish up with about 60 pictures, which will probably be changed on a regular basis and I can see my whole time being taken up with just that one job. Would it not be possible to have just a simple enlargement to 450 width when the picture is clicked on? Hi Bob, How are you doing it now? You have to start with an image of some sort, and a URL to wherever it's located. I've looked at your site and most of the small images are linked from Photobucket and are displayed actual size (160 pixels wide). Enlarging that to 450 wide will produce an extremely poor image quality. See attached image enlarged to 450 from 160. Presumably the large size originals are also on Photobucket? And you know the URLs? You can have the browser shrink them down to provide the small images if you don't want to do that yourself. But it is then a fast ShrinkDraw resize and image quality is not very good. It's usually better to create your own small version as a properly resampled resize in a photo editor. Likewise the browser can resize the original to 450 or any other fixed width. But again you will get a much better image quality if you do a resampled resize yourself. I took the example pictures from your own website gallery, so obviously you are already doing this and I'm a bit confused about what you see as a problem? Presumably you are not going to change all 60 pictures in one go? Just a few at a time. It shouldn't take more than 2 or 3 minutes to edit the code with the replacement URLs and change the text and titles accordingly. Now that you have purchased hosting on Data 1 Systems it would make far more sense to host the pictures on there. They will load much faster than from a massive site such as Photobucket and you will have total control. The URLs will also be much shorter and easier to edit without mistakes. If it was my project I would: 1. Download the largest available image from wherever it is now. 2. Resample it to 450 wide or whatever you want for the large image. 3. Resample it to 150 wide or whatever you want for the small image. 4. Upload both of them to your hosting at D1S. 5. Insert the simplified URLS in the forum page. You don't have to do the whole list in one go. You can have a temporary holding picture in the enlarged panel, and temporarily use the existing small pictures. regards, Martin. Attachment: combwich_enlarged.jpg (Downloaded 29 times)
|
||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
Robert Member
|
So how do I go about uploading pictures to Data 1 Martin?
|
||||||||||||||
| |||||||||||||||
| Current time is 10:16 am | Page: 1 2 3 |
| WowUltra Forums > WowUltra > Software Assistance > Side panel pictures. | |
