Log in

View Full Version : Searching for a nifty script


htoorenz
05-22-2010, 04:37 PM
Hi Dynamic Drive visitors!

I'm currently looking for a script that does something similar as this:

http://www.vi.nl/

I'm reffering to the part near the top of the page where the larger pictures can be shown by hovering the links at the right. It doesn't need to be 100% accurat as this script, but something similar. I have searched the entire Dynamic Drive site, but couldn't find something that resembles this, but perhaps anyone of you knows?

Best regards,
Harm
azoomer
05-22-2010, 05:14 PM
Hi htoorenz
I think the featured contentslider (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm) is pretty close to what you need, if you look at the last one. Of course you would need to change some html and css. The only thing that is not similar is that the slideshow stops after hovering over the smaller images, but maybe that could be changed, i don't know.
htoorenz
05-22-2010, 05:42 PM
Hi Azoomer,

Yes, that one comes pretty close and I had seen that one already. However, it lacks two things: first, the hoverable links are at the bottom, whereas I need them at the right of the larger picture and secondly, there's no option to place text (caption) underneath the large picture. Ideally this text would be placed over the bottom of the large picture with an opacity-filter, so that the underlying picture is still to be seen (although somewhat darker). Not sure if I make sense... :)
azoomer
05-22-2010, 05:56 PM
The placement of the links ( thumbnails) and the text underneath the larger images should not be difficult to change. I will try to make an example and post soon. About the opacity i am not sure how to do that
htoorenz
05-22-2010, 06:08 PM
Ok, Azoomer, I'll just sit on my hands and wait. Re the opacity: no problem, that merely would be ideal, but not absolutely necessary. Thanks in advance, my friend!
azoomer
05-22-2010, 06:59 PM
Ok it took a while but here (http://azoomer.com/fcs/) is an example. Obviously it is just a quick sketch that would need a lot adjustment. Take a look
htoorenz
05-23-2010, 09:40 AM
It is even more than I had hoped for, Azoomer! You Tha MAN! ;-) Thanks alot for your excellent effort!

Best regards
Harm Toorenz
Amsterdam
htoorenz
05-23-2010, 10:29 AM
Hi Azoomer,

I've copied all of the examples-material (the HTML, graphics, thumbs, contentslider.css and contentslider.js) to my pc, but I'm unable to make the opacity-part working:

- I noticed you use an opaque.png in the images/ folder, but I'm unable to copy that .png from http://azoomer.com/fcs/images/opaque.png (nothing to see, although it's there, I assume), so I made an opaque.png myself of 1x1 px, but no result: no opacity-part and no textual content-description either on my own pc.

- Also, when I hover the text at the right, the cursor doesn't change to the pointing finger, indicating a link. It becomes a capital I, indicating it's pure text.

What am I doing wrong or overlooking here, you think?

Further more:

- In the <a href=...>-part I noticed a class="toc", but I couldn't find this class in the contentslider.css. Is it an obsolute class?

- I noticed that the DOCTYPE-part in the HTML was added twice (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">). Is there any particular reason for that?

Just for the record: the example-page YOU made, works like a charm!

As always, your help will be greatly appreciated.

Kind regards,
Harm
azoomer
05-23-2010, 11:30 AM
Hi Harm. The two doctypes are just a mistake on my part. The opaque image is only 1px x 1px , that's why it is difficult to see, but it is in the location you tried, in the upper left corner. I am not sure why it is not working on your pc. Usually it is the path to the files that is not correct. I think the "toc" class is made and used somehow in the javascript file and it is not easy to style the links via css when the script is in "markup" mode. Also when the script is set to "markup" ( see the documentation), then some of the css is not used and can be cleaned out, but i haven't had time to do that.
I don't understand it that well myself and that makes it hard to explain. But i made some small changes and you can see if it works better now. I have attached a zip with the files (except the large images because of the upload limit). Good luck
htoorenz
05-23-2010, 01:05 PM
Hi Azoomer,

Thanks again! Í think I have found the cause of the non-displaying of the opacity-part. I use Homesite to load all HTML and Homesite uses IE as it's browser. By default my IE doesn't load Javascript (don't know why, nor how to repair that), but after I have explicitely allowed Javascripting, it shows the opacity-part. Although NOT in Homesite, but when I doubleclick the index-file. In Firefox, which I default use, it works perfectly.

I have managed to download the opaque.png from your site; how does one make these opaque-file? I need to experiment a bit with darker opaque-files. I am faily familiar with Paintshop Pro and do all my graphics myself, but I must confess that makening an opaque is beyond me at the moment. Any ideas?

A small question regarding that opaque-section: in order to make it twice as high as it currently is, I assume I have to adjust the CSS and more specifically this section:

.contentdescription{
font-size:12px;
padding: 8px;
color:#F4F4F4;
width:500px;
margin-top:-32px;
background: url(gfx/opaque.png);
background-repeat:repeat;
z-index:1000;
position:absolute;

However, I have tried the padding-part as well as the margin-top part, but these won't do the trick. What part do I need to change to make it -let's say- twice as high?

So, a darker and higher opaque-section is what I need, but I hope I'm not imposing! ;)

Best regards,
Harm
azoomer
05-23-2010, 01:51 PM
Yes you can change the (negative) margin like this:

.contentdescription{
font-size:12px;
padding: 8px;
color:#F4F4F4;
width:500px;
height:44px;
margin-top:-60px;
background: url(images/opaque.png);
background-repeat:repeat;
z-index:1000;
position:absolute;
}

I added a height so you will have some more lines to write on. The height + the padding-top and padding-bottom equals the (-) margin.

I have made a selection of opaque png's attached in a zip-folder ( from 20% to 90%). I made them in photoshop where you can adjust the opacity for a layer. You have to be aware that older IE browsers do not support png's with alpha transparancy so i'm not sure how it will look in f.ex IE6.
azoomer
05-23-2010, 01:59 PM
Okay there is a way around the issue with internet explorer and alpha transparency. You will need to use the AlphaImageLoader filter, but im not exactly sure how to do that.
htoorenz
05-26-2010, 06:05 PM
Hi Azoomer,

Due to a few unexpected nightshifts, I could not respond earlier, sorry for that, but thanks alot, once again, for your help! The zip-file with the different opaques was more than I could ask for and sufficient to solve the problem, thanks as well!

I will need to look into the AlphaImageLoader later on, but for now I need to concentrate on having this whole thing you made, placed into a webpage with the pictures and hovering links at the left side and another container -in which I will need to place other links- on the other side. That's a CSS-problem, but I think unsolvable with CSS boxes, so I will try and accomplish this with tables; I know, a death-sin for pure CSS-coders, but the only way to make sure all browsers will be able to show the result. So it's back to the drawingboard! Thanks for all you help Azoomer!

Best regards, Harm
Amsterdam