A small issue with placement of slideshow controls

[amy]

I created a slideshow in the visual editor. I selected small controls to sit outside of the image on the bottom. I made some changes so I could have captions under the thumbnails and I'm wondering if some of the code that's overriding the .js files is causing this.

The page is: http://womensartfestival.com/gallery.php

The added coded in the head is:

Code: Select all

 <script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;

    // Add the controlbar
    hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
            opacity: .75,
            position: 'bottom center',
            hideOnMouseOut: true
        }
    });

</script>

I'm guessing it has something to do with the "fixedControls" but I'm not sure how to change it.

Thanks.

[RoadRash]

Hi,

The controls get messed up because you have settings for controls both in your highslide.config.js file and between the head tags.
Remove this code in the head:

Code: Select all

<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;

    // Add the controlbar
    hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
            opacity: .75,
            position: 'bottom center',
            hideOnMouseOut: true
        }
    });

</script>

Open highslide.config.js and replace the content with this:

Code: Select all

/**
*	Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.5;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.marginBottom = 40;
hs.numberPosition = 'heading';

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});



// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '1',
		position: 'bottom center',
		offsetY: '-10',
		relativeTo: 'viewport',
		hideOnMouseOut: false
	}
});

[amy]

Hi Roadrash,
It doesn't seem to be working quite right. When I remove the code in the head and put the other code into the config file the controls seem to be completely gone. The same seems to happen if I leave the head code but remove the config file. I've left it alone for the moment. It's not awful. Actually if I could just have the controls on one line instead of two that would be better. I'm assuming this would be changed in the CSS but I can't seem to find the right place. Thanks, Amy

[RoadRash]

I just downloaded your page, removed the code in the head and replaced everything in highslide.config.js with this:

Code: Select all

/**
    *   Site-specific configuration settings for Highslide JS
    */
    hs.graphicsDir = 'highslide/graphics/';
    hs.showCredits = false;
    hs.outlineType = 'custom';
    hs.dimmingOpacity = 0.5;
    hs.transitions = ['expand', 'crossfade'];
    hs.fadeInOut = true;
    hs.align = 'center';
    hs.captionEval = 'this.a.title';
    hs.marginBottom = 40;
    hs.numberPosition = 'heading';

    hs.registerOverlay({
       html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
       position: 'top right',
       useOnHtml: true,
       fade: 2 // fading the semi-transparent overlay looks bad in IE
    });

    // Add the slideshow controller
    hs.addSlideshow({
       //slideshowGroup: 'group1',
       interval: 5000,
       repeat: false,
       useControls: true,
       fixedControls: false,
       overlayOptions: {
          className: 'controls-in-heading',
          opacity: '1',
          position: 'bottom center',
          offsetY: '-10',
          relativeTo: 'viewport',
          hideOnMouseOut: false
       }
    });

This is the result:

2010-10-07_0440.png (335.72 KiB) Viewed 3713 times

If you want to keep the large controls on top of the image, you can change the width for .highslide-controls.
Find this near the bottom of highslide.css:

Code: Select all

.highslide-controls {
	position: static !important;
	margin: 0;
	width: 80px !important;
}

Change the width to 135px:

Code: Select all

.highslide-controls {
	position: static !important;
	margin: 0;
	width: [hilight]135px[/hilight] !important;
}

[amy]

Thanks again Roadrash. By the way, I just purchased an unlimited license. I can't imagine better support anywhere else.