Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: More than 5 Images in Slide Show

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    Well the real trick would be to create a javascript, or better yet a PHP script that could create the styles and markup for you.

    About rounded corners, on Beverley's demo:

    Code:
    img, #slider {border-radius: 25px; background: #eaeaea;}
    #mask {border-radius: 30px; background: #eaeaea;}
    The mask should be a higher border-radius than the img and slider I think, and their backgrounds should match the page background.

    Oh, and you would want to shorten the progress bar and move it to the left a little:

    Code:
    .progress-bar { 
    	position:relative;
    	top:-5px;
    	left: 13px;
    	max-width:655px; 
    	height:5px;
    	backgro . . .
    And in a stunning turn of events, adding the styles at the beginning of this post in an on page stylesheet in the head, caused Chrome to stop wanting to translate the page!
    Last edited by jscheuer1; 08-19-2013 at 04:05 PM. Reason: add Oh, and . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. The Following User Says Thank You to jscheuer1 For This Useful Post:

    johnwboyd (08-19-2013)

  3. #12
    Join Date
    Feb 2008
    Posts
    78
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Just as simple as adding the border width on the mask did the trick. : )

  4. #13
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,466
    Thanks
    16
    Thanked 422 Times in 420 Posts
    Blog Entries
    20

    Default

    And in a stunning turn of events, adding the styles at the beginning of this post in an on page stylesheet in the head, caused Chrome to stop wanting to translate the page!
    Well I never...

    That's progress for you
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    Here's my latest:

    http://home.comcast.net/~jscheuer1/s...der/demo10.htm

    I used only generic css 3 and -webkit- css 3 properties. Includes curved corners via border-radius (css 3 only, no -webkit- or other proprietary -whatever- properties). Changed the length and left position of the progress bar to fit with the rounded corners, as well as its color and the color of the tooltips.

    Issues:

    • Still gets messed up in Opera after about two cycles.

    • In Chrome and Opera, I can't seem to get the border radius to act like a crop during transitions (works well in IE and Firefox).

    • In Chrome there's an annoying flicker on mouse out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #15
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think I see how you are doing this, but I am trying to make the image number 4 and am having a very difficult time figuring out how to make it work. I have deleted cyclefive in all the places I could find but still have a blank spot show up with the progress bar on it's own. I thought maybe there is a progress bar fifth cycle so to speak and attempted to modify those numbers and rows of number and just broke it. Can you help me? Thanks!!

  7. #16
    Join Date
    Mar 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Beverly,
    I appreciate your input here, I already built a 5 slide show for my dronesarefun.com websites home page from the original instructions, but figuring out how to modify it adequately for a six slide show defeated me until I found your instructions for a 10 slide show mod.
    Of course, one thing that is immediately apparent is that these instructions work very well for a 10 slide show but calculating appropriate offsets for anything between a 5 and a 10 slide one is a bit trickier.
    For one thing we are dealing in whole decimal values without decimal points and the divisions do not produce whole values.
    So you need to interpolate to the nearest whole value.
    And any errors that you make are cumulative and end up at the very end of the slide show where it wraps back to the start.
    All that said I was able to approximate offsets and ended up with a very adequate 6 slide show with only a tiny bit of misalignment on the final wrap back to the start (which I will still try to finesse out of it).
    I also need to make a 7 slide show, but I think except for the primary alignment offset (currently 10 for 6 slides) which will need to be reduced further, I will be able to leave the other offsets the same (3 and 1).
    I wouldn't have been able to get this far without your help, I try to avoid Javascript whenever possible due to users often having Java incompatibilities and this CSS3 slide show certainly shows a very powerful instance of being able to get along without it.
    Best Regards,
    Gary

  8. #17
    Join Date
    Mar 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi All,

    I have now succeeded in getting 4,5,6 and 7 slide shows to function correctly, at least in Chrome and Explorer.

    In Chrome and Exolorer, the timings and slide displays and recycle are perfect for each number of slides.

    Firefox, is a bit problematic although more annoying than anything.

    In Firefox only, the slides come down with a 20% to 50% black band and then when they get to the bottom pop to full visibility.

    This only happens in Firefox and not in Chrome or Explorer, which display correctly.

    The original 5 slide show from Alessio also has this problem but to a lesser degree than on my slides:

    When you start Alessios Demo, the first 2 slides come down with about a 20% dark band in Firefox, but not the rest of them until they recycle and then the first 2 have the 20% black band again.

    Based on the recommendations here, I have not incorporated the -moz- references for FireFox.

    If anybody could offer a suggestion I would appreciate it.

    I can live with the Firefox discrepancies, but they detract from an otherwise great routine.

    Also if anyone would like the "percents" and time for any of my slide shows, please let me know and I will publish them here.

    (The 4 slide show numbers published previously do contain one mistake.)

    Best Regards,

    Gary McCray

Similar Threads

  1. Add more images to the fade-in slide show
    By DiFine in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-13-2012, 01:49 PM
  2. Resolved ALT text on images in slide show
    By Wacky roger in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 03-16-2010, 11:40 AM
  3. Ultimate Slide Show - Images red x
    By Pancrazio in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-01-2007, 10:14 AM
  4. slide show with 9 images
    By jurgenf in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-21-2007, 12:55 PM
  5. Flex-Slide Show Images Won't Show
    By stillatlarge in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-24-2006, 09:01 PM

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
  •