Full Screen Assistance

priestd's Avatar

priestd

15 Sep, 2012 01:43 PM

RoyalSlider worked great out of the box.

We are experiencing some issues getting full screen to work as desired. See test page following. You may need to refresh the page if the full screen icon does not appear (a scrolling bug with our s/w).

All photos are 640 x 480, 480 x 640 or smaller. We are using RoyalSlider to scale so all photos displayed as 640 x 480. In full screen, we wish to show the user the original photo.

IE, Chrome, Safari, iOS - full screen photo behind our UI
FF - full screen photo within one of our div's

Any tips most welcome.

Regards,

David Priest
gardenaway.com

TEST PAGE

http://gardenaway.com/forums/GASearch.php?st=32&ga_t=plants&amp...


SETUP

if ($('#gallery').length != 0) {
            $('#gallery').royalSlider({
                autoScaleSlider: true, 
                autoScaleSliderWidth: 640,     
                autoScaleSliderHeight: 480,
                imageScaleMode: 'fill',
                controlsInside: false,
                keyboardNavEnabled: false,
                numImagesToPreload:1,
                fullscreen: {
                    enabled: true
                }
            });
        }

DATA

<div name="gallery" class="royalSlider rsDefault fwImage col span_4" id="gallery">
    <div name="HTMLdiv1317" class="rsContent">
        <a class="rsImg" href="http://gardenaway.com/images/1_1_fuyazzs8.jpg" data-rsBigImg="http://gardenaway.com/images/1_1_fuyazzs8.jpg"></a>
        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect data-move-offset="10" data-move-effect="bottom" data-speed="200">
            <a href="http://www.mobot.org/gardeninghelp/plantfinder/Plant.asp?code=A930" target="_blank">Courtesy Missouri Botanical Garden PlantFinder</a>&nbsp;<br>
            <span class="license">All Rights Reserved</span>
        </div>
    </div>
    <div name="HTMLdiv1322" class="rsContent">
        <a class="rsImg" href="http://gardenaway.com/images/1_2s7_gns6qx8v.jpg" data-rsBigImg="http://gardenaway.com/images/1_2s7_gns6qx8v.jpg"></a>
        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect data-move-offset="10" data-move-effect="bottom" data-speed="200">
        <a href="http://commons.wikimedia.org/wiki/Image:Abelia_x_grandiflora_Edward_Goucher2.jpg" target="_blank">&copy; KENPEI (Wikimedia Commons)</a>&nbsp;<br>
        <a class="license" href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Some Rights Reserved</a>
        <img src="http://gardenaway.com/icons/cc/by20.png" title="Attribution">
        <img src="http://gardenaway.com/icons/cc/sa20.png" title="Share Alike">
    </div>
</div>
  1. Support Staff 1 Posted by Dmitry Semenov on 15 Sep, 2012 07:23 PM

    Dmitry Semenov's Avatar

    Hi,

    If by issue you mean that your site content overlaps slider in fullscreen, so this is most likely because you put it inside HTML table which has bugs with fixed positioned children.

    Dmitry

  2. 2 Posted by priestd on 17 Sep, 2012 02:33 PM

    priestd's Avatar

    That worked.

    Thanks for the suggestion.

    dp

  3. priestd closed this discussion on 17 Sep, 2012 02:33 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac