Results 1 to 6 of 6

Thread: swiss army image slideshow - moving buttons OVER image count

  1. #1
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default swiss army image slideshow - moving buttons OVER image count

    1) Script Title: swiss army image slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

    3) Describe problem:
    By default, the buttons can be on the FAR TOP or on the FAR BOTTOM of the script, instead I would like to move the buttons OVER the image count.
    the image count should be the last thing you see.
    I would like the order to be:

    IMAGE
    DESCRIPTION
    BUTTONS
    IMAGE COUNT

    and is it possible to have the image count in between the buttons?

    IMAGE
    DESCRIPTION
    PREV BUTTON - IMAGE COUNT - NEXT BUTTON

    thanks for the help

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    The script is very flexible with many documented properties that act as options for how any given slide show will present itself.

    However, I'm not aware of any, or any combination of them that would do just what you are asking, and I wrote the script.

    Still, with additional code, and/or clever styling, and/or rewriting sections of the script - it could be done.

    Working from the 1st demo slide show, I got pretty good results like so:

    Code:
    var slides=[]; //FIRST SLIDESHOW
    //configure the below images and descriptions to your own. 
    slides[0] = ["photo1.jpg", "Kissing Fools"];
    slides[1] = ["photo2.jpg", "Seated Woman"];
    slides[2] = ["photo3.jpg", "The Dog Lovers"];
    slides[3] = ["photo4.jpg", "Standing Woman"];
    slides[4] = ["photo5.jpg", "John, Mary and Jesus - Will this wrap?"];
    //optional properties for these images:
    slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
    slides.counter=1; //use to show image count
    slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
    Then in the body:

    Code:
    <div id="show1"><script type="text/javascript">
    //Notes on Parameters: The only required parameter is the slides_array_name.  If Width is used, so must Height.
    //Interval is optional too.  It is always last, either fourth after Width and Height or second after Slides_array_name.
    //Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
    new inter_slide(slides)
    </script></div>
    Which then allowed for these styles in the head:

    Code:
    <style type="text/css">
    
    /* All Styles Optional */
    
    #show1 input {
    margin:0 4.5em;
    position:relative;
    top:-1.5em;
    }
    
    </style>
    which separated the control input buttons (put more space between them) and raised them up to the level of the counter. You may want to change the exact dimensions to suit. Other modifications may be made in any or all of the areas already mentioned.
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks a lot for the help! great script by the way

    in the end I didn't need the counter feature, but your suggestion was useful because I needed to put the controls at the same height of the description, and it worked.

    as you can see on this page: http://www.elp.it/delgatto/gallery.html

    I have another problem: try clicking on the controls and you will see that it highlights the table cell below.

    I was able to eliminate the highlight feature onmouseover.
    can you tell me how to completely eliminate the highlight feature onclick?
    I actually don't need it at all.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    For that, the easiest way would be to actually edit the swissarmy.js script file here (add the red comment marks):

    Code:
    inter_slide.prototype.ibute=function(obj, i){
    //if(!obj.parentNode)
    return;
    if(i==1)
    obj.parentNode.style.backgroundColor=this.ibut_hc? this.ibut_hc : 'yellow';
    else if(i==2)
    obj.parentNode.style.backgroundColor='transparent';
    else if(i==3){
    obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='1px solid gray';
    obj.parentNode.style.paddingRight='1px';obj.parentNode.style.paddingBottom=0;
    }
    if (i==2||i==4){
    obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='none';
    obj.parentNode.style.paddingRight='2px';obj.parentNode.style.paddingBottom='1px';
    }
    }
    That will disable the subroutine that ordinarily gives the image buttons (if used, as I see you have) the depressed look when clicked. In your design, its not doing that anyway so, as I say, might as well get rid of (disable, as shown) it.
    - John
    ________________________

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

  5. #5
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you very much!

  6. #6
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I must be doing something wrong or I just don't understand .... well, a lot of things, however...

    I'm trying to do basicall the same thing. I need:

    IMAGE
    -----------------------------------------
    previous - - next
    -----------------------------------------
    other stuff here

    unfortunately I'm not having much luck

    The best I can do is get the standard buttons with a HUGE space under them.
    Yes, I did add the no_descriptions and no_added_linebreaks. I tried the css code in this thread and didn't see any changes.

    And one other thing, how can you tell how large the image box will be? My images are 200 x 500 but I can't figure out the exact height including the navigation buttons.

    Please help, I'm getting very frustrated. I love what others have done with this script and would really like it to work for me.

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
  •