Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Searching for a nifty script

  1. #1
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Searching for a nifty script

    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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi htoorenz
    I think the featured contentslider 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.
    Last edited by azoomer; 05-22-2010 at 05:20 PM.

  3. #3
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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...

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  5. #5
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Ok it took a while but here is an example. Obviously it is just a quick sketch that would need a lot adjustment. Take a look

  7. #7
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    It is even more than I had hoped for, Azoomer! You Tha MAN! ;-) Thanks alot for your excellent effort!

    Best regards
    Harm Toorenz
    Amsterdam

  8. #8
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  10. The Following User Says Thank You to azoomer For This Useful Post:

    htoorenz (05-23-2010)

  11. #10
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •