Results 1 to 5 of 5

Thread: Simple Controls Gallery - controls outside of images?

  1. #1
    Join Date
    Jul 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Simple Controls Gallery - controls outside of images?

    1) Script Title: Simple Controls Gallery

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

    3) Describe problem:

    Hi there,

    Is it possible to place the controls and image number outside of the image so the controls are always visible?

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    For the first gallery, add these styles (tested in FF only):

    Code:
    .navpanellayer {
    top: auto!important;
    bottom: 0;
    }
    #simplegallery1{
    padding-bottom: 50px;
    }
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excellent! Many thanks. I am actually trying to place those controls on the other side of the page instead of under the image. Is that at all possible?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Well, I just got lucky first shot modifying this brand new script which I'd never even heard of before. However, there would probably need to be a rewrite of the code to get the controls out of the gallery proper, as the script generates the controls' markup and places it inside the wrapperid main gallery container from which they cannot escape, owing to its style overflow which is also required for the proper display of the images.

    Though we may be able to permanently hide the native controls and make others that appear elsewhere, but function in the same manner. I'd have to go over the script code for that.

    There are other scripts that function differently. I'm currently in beta with one that will allow controls to appear anywhere on the page, but the controls function slightly differently if you go backward or forward it stops the sliding effect, which can be resumed. And there are many many more options for controls and layout of everything involved.

    If you are interested, let me know. A demo that shows a lot of the possibilities is here:

    http://home.comcast.net/~jscheuer1/s.../vac_plain.htm

    None of what is on that page must appear, so you could have just a slide show with a few of the controls, no thumbnails. Or no slideshow with just thumbnails to select the larger image for display. Many many options. The controls can be script generated as those are, or you may design the look of them yourself using images and links.
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    OK, I figured out a way to get the controls out of the gallery. Use these styles (the exact placement and styles of the #simpc1 division is up to you, these are the now mobile controls, they can go anywhere. If using more than one gallery, it's id must be unique to each gallery):

    Code:
    .navpanellayer {
    position: static!important;
    }
    .navpanellayer div {
    position: relative!important;
    top: auto!important;
    }
    .navpanellayer div.navpanellayerfg {
    top: -2px!important;
    }
    .navpanellayerbg {
    display: none;
    }
    #simpc1 {
    background-color: gray;
    width: 150px;
    float: right;
    }
    Add to the call for the gallery:

    Code:
    <script type="text/javascript">
    
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new"],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
    		["http://i30.tinypic.com/531q3n.jpg", "", ""],
    		["http://i31.tinypic.com/119w28m.jpg", "", ""]
    	],
    	autoplay: true,
    	persist: false,
    	pause: 2500, //pause between slides (milliseconds)
    	fadeduration: 500, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    	var d = document.getElementById(this.wrapperid).getElementsByTagName('div'), c, i;
    	for (i = d.length - 1; i > -1; --i)
    	if (d[i].className == 'navpanellayer'){
    	c = d[i];
    	break;
    	}
    	document.getElementById('simpc1').appendChild(c.parentNode.removeChild(c));
    	},
    	onslide:function(curslide, i){ //event that fires after each slide is shown
    		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
    		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    	}
    })
    
    </script>
    Then in the body, for example:

    Code:
    <div id="simplegallery1"></div>
    <br>
    <div id="simpc1"></div>
    Here's a demo, where I used slightly different style and markup for the external controls, so as to place them just beneath the gallery and match their background color to the gallery border to get an integrated look to it:

    http://home.comcast.net/~jscheuer1/side/simple_gal/
    Last edited by jscheuer1; 12-23-2008 at 02:40 AM. Reason: add demo
    - John
    ________________________

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

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
  •