Galleriffic.js Ausgabe Vollbild

js_dev · 22. Juni 2014

Hallo
Ich hab leider noch keine Erfahrung mit JS. Ich habe grade die Administration einer Webseite übernommen auf der Bilder via dem galleriffic script angezeigt werden.
Ich würde die Galerie gerne um eine Vollbild Funktion erweitern.

Meine Ideen:
1. Link auf der Seite der das aktuelle Bild im Vollbild anzeigt => Hab mal versucht das hier einzubinden nicht geklappt

2. irgendwo muss das Script ja ne Ausgabe haben sprich das Bild an der richtigen Stelle in der richtigen Größe anzeigen. Da irgendwo eingreifen, geht das?

Hoffe ihr könnt mir helfen Danke im Voraus
Gruß
js

dbarthel · 22. Juni 2014

Schau mal hier:

https://brad.is/coding/BigScreen/

js_dev · 22. Juni 2014

Danke für die Schnelle Antwort! Klinkt ganz gut.
cih weiß nur nicht wie ich die jetzt einbinde

Im headerhabe ich die Datei schon importiert

Aber wie rufe ich jetzt den Modus auf bzw. wo binde ich diesen Code ein

Code:

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.request(element, onEnter, onExit, onError);
        // You could also use .toggle(element, onEnter, onExit, onError)
    }
    else {
        // fallback for browsers that don't support full screen
    }
}, false);

Edit: Die Webseite ist in php geschrieben

js_dev · 22. Juni 2014

Ich hab jetzt in jquery.galleriffic.js Dort wo die navControls eingefügt werden den Cod um folgendes ergänzt:

Code:

this.$controlsContainer
					.append('<div class="full-controls"><a class="play" id="fullscreen" title="Vollbild">Vollbild</a></div>')
					.find('div.full-controls a')
					.click(function(e) {
						gallery.clickHandler(e,this);
					});

Was muss ich jetzt machen damit beim klick auf den link in den Vollbild Modus gewechselt wird?

miniA4kuser · 22. Juni 2014

Hatte Galleriffic bis jetzt nicht im Einsatz, aber hat das nicht sowas wier customevents? Könnte man doch darüber einbinden.

dbarthel · 23. Juni 2014

Wenn du BigScreen einsetzt, reicht es doch dem Bild

Code:

class="zoom-in"

zu zuweisen, so wie bei der Demo (erstes Bild) auf der Seite.

Code:

<link rel="stylesheet" href="common.css">

<div id="image" [B]class="zoom-in"[/B]></div>
<script src="../src/bigscreen.js"></script>
<script src="libs/common.js"></script>
<script>

	function enterCallback(actualElement) {
		sendMessage({
			scope: 'photo',
			name: 'enter',
			id: actualElement.id
		});

		this.classList.remove('zoom-in');
		this.classList.add('zoom-out');
	}

	function exitCallback() {
		sendMessage({
			scope: 'photo',
			name: 'exit'
		});

		this.classList.remove('zoom-out');
		this.classList.add('zoom-in');
	}

	function errorCallback(reason) {
		sendMessage({
			scope: 'photo',
			name: 'error',
			reason: reason,
			id: this.id
		});
	}

	var img = document.getElementById('image');

	img.addEventListener('click', function() {
		BigScreen.toggle(img, enterCallback, exitCallback, errorCallback);
	}, false);

</script>

statt dem DIV kannst du das auch mit dem img Tag machen

Code:

<div id="photo-demo">
				<p>Click the photo to go full screen.</p>
				<img src="//cdn.brad.is/static/images/lake.jpg" width="600" height="448" [B]class="zoom-in"[/B] alt="">
			</div>

js_dev · 23. Juni 2014

Es gibt halt keinen Image Tag da der Code erst durch das Galerie Script erzeugt wird. Hier der Code von meiner Webseite:

Code:

<?php include($_SERVER['DOCUMENT_ROOT'].'/ifiles/inc/pre_html.inc.php'); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <?php
                        include_once($_SERVER['DOCUMENT_ROOT'].'/ifiles/inc/html_header.inc.php');
                ?>
                <title>TITLE</title>

                 <link rel="stylesheet" href="/ifiles/css/galleriffic-bearb.css" type="text/css" />

<script type="text/javascript" src="/ifiles/js/bigscreen.min.js"></script>
                <script type="text/javascript" src="/ifiles/js/jquery-1.3.2.js"></script>

                <script type="text/javascript" src="/ifiles/js/jquery.history.js"></script>

                <script type="text/javascript" src="/ifiles/js/jquery.opacityrollover.js"></script>

                <script type="text/javascript" src="/ifiles/js/jquery.galleriffic.js"></script>

                <!-- We only want the thumbnails to display when javascript is disabled -->

                <script type="text/javascript">

                        document.write('<style>.noscript { display: none; }</style>');

                </script>

                <style type="text/css">
                        .BodyElement {
                                 margin:0 auto 0 auto;
                                 padding:0;
                                 border:0;
                                 min-width:990px;
                                 max-width:1000px;
                         }
                </style>

                 <script type="text/javascript">

        jQuery(document).ready(function ($) {

            // We only want these styles applied when javascript is enabled

            //$('div.navigation').css({ 'width': '640px', });

            $('div.content').css('display', 'block');
            $('div.caption').css('display', 'block');

            //$('#thumbs ul.thumbs a').css({'background': '#FFFFFF'});

            // Initially set opacity on thumbs and add

            // additional styling for hover effect on thumbs

            var onMouseOutOpacity = 0.79;

            // zuvor #thumbs ul.thumbs li
            $(' #thumbs ul.thumbs li ').opacityrollover({

                mouseOutOpacity: onMouseOutOpacity,

                mouseOverOpacity: 1.0,

                fadeSpeed: 'fast',

                exemptionSelector: '.selected'

            });



            // Initialize Advanced Galleriffic Gallery

            var gallery = $('#thumbs').galleriffic({

                delay: 2500,

                numThumbs: 16,

                preloadAhead: 10,

                enableTopPager: true,

                enableBottomPager: true,

                maxPagesToShow: 10,

                imageContainerSel: '#slideshow',

                controlsContainerSel: '#controls',

                captionContainerSel: '#caption',

                loadingContainerSel: '#loading',

                renderSSControls: true,

                renderNavControls: true,

                playLinkText: 'Slideshow starten',

                pauseLinkText: 'Slideshow stoppen',

                prevLinkText: '‹ Vorheriges Photo',

                nextLinkText: 'Nächstes Photo ›',

                nextPageLinkText: 'weiter ›',

                prevPageLinkText: '‹ zurück',

                enableHistory: false,

                autoStart: false,

                syncTransitions: true,

                defaultTransitionDuration: 900,

                onSlideChange: function (prevIndex, nextIndex) {

                    // 'this' refers to the gallery, which is an extension of $('#thumbs')

                    this.find('ul.thumbs').children()

                                                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()

                                                        .eq(nextIndex).fadeTo('fast', 1.0);
                this.$captionContainer.find('div.photo-index').html('Photo '+ (nextIndex+1) +' von '+ this.data.length);

                },

                onPageTransitionOut: function (callback) {

                    this.fadeTo('fast', 0.0, callback);

                },

                onPageTransitionIn: function () {

                    this.fadeTo('fast', 1.0);

                }

            });

            /**************** Event handlers for custom next / prev page links **********************/



                                gallery.find('a.prev').click(function(e) {

                                        gallery.previousPage();

                                        e.preventDefault();

                                });



                                gallery.find('a.next').click(function(e) {

                                        gallery.nextPage();

                                        e.preventDefault();

                                });


            $('#thumbs').width(640);

        });

    </script>

        </head>
        <body id="medien">
                <?php
                        include_once($_SERVER['DOCUMENT_ROOT'].'/ifiles/inc/body_header.inc.php');
                ?>

    <div class="BodyElement" id="BodyDiv">
                  
    
     <div style="clear:both; height:1px; overflow:hidden;" id="image"> </div>
     <div class="LeftFramePadding" style="float: center; text-align: center; margin: auto;">

                         <?php
                        mainbox('
                        <noscript>
                                        <div style="border: 2px solid white; margin-left: 35px; margin-right: 32px;">
                                        <img src="/ifiles/img/warnzeichen_ausrufezeichen.gif" alt="Ausrufezeichen" style="width: 70px; float: left; margin: 20px;"   />
                                        <h3>JavaScript ist nicht aktiviert.</h3>
                                        <p>Um die Photos auf dieser Seite richtig angezeigt zu bekommen und mit einer schönen Slideshow zu sehen, aktiviere unbedingt JavaScript in den Browsereinstellungen.</p>
                                        </div>
                              </noscript>
                        <!-- <div id="mid-feature-client">
                        <div id="mid-feature-gallery"> -->

                        <!-- Start Advanced Gallery Html Containers -->
                        <!--<div style="position: absolute; top:415px; left:205px; width:850px; height:195px; background-color:#fff; opacity:0.9"></div>   -->
                        <div id="container">

                                <!-- Thumbnail Container -->

                                <div class="navigation-container">

                                <div id="thumbs" class="navigation">

                                        <a class="pageLink prev" style="visibility: hidden;" href="#" title="‹ zurück"></a>

                                <ul class="thumbs noscript">


       
<li><a class="thumb" href="slides/Pfila2014-0001.jpg" ><img src="thumbs/Pfila2014-0001.jpg" alt="Pfila2014-0001.jpg" width="90" height="90" /></a><div class="caption"> <div class="image-title">Pfila2014-0001.jpg - Ankunft</div><div class="image-desc"><p>Die Eisfüchse beim aufbauen.</p><p>Aufgenommen am 07.06.2014 10:26 Uhr.</p></div></div></li>

<li><a class="thumb" href="slides/Pfila2014-0002.jpg" ><img src="thumbs/Pfila2014-0002.jpg" alt="Pfila2014-0002.jpg" width="90" height="90" /></a><div class="caption"> <div class="image-title">Pfila2014-0002.jpg - Ankunft</div><div class="image-desc"><p>Lena</p><p>Aufgenommen am 07.06.2014 10:27 Uhr.</p></div></div></li>

<li><a class="thumb" href="slides/Pfila2014-0003.jpg" ><img src="thumbs/Pfila2014-0003.jpg" alt="Pfila2014-0003.jpg" width="90" height="90" /></a><div class="caption"> <div class="image-title">Pfila2014-0003.jpg - Ankunft</div><div class="image-desc"><p>Die Aborigines treffen ein.</p><p>Aufgenommen am 07.06.2014 10:27 Uhr.</p></div></div></li>
		
								
                        </ul>
						

                        <a class="pageLink next" style="visibility: hidden;" href="#" title="weiter ›"></a>

                </div>      <!-- End-Tag zu <div id="thumbs" class="navigation"> -->
                </div>      <!-- End-Tag zu <div class="navigation-container"> -->

                <div style="clear:both; height:1px; overflow:hidden; margin-bottom:-1px; padding:0;"> </div>

              <div id="gallery" class="content">     <!-- class="content" wird erst durch JS sichtbar  -->

                <div id="controls" class="controls"></div>


<div id="img">
                <!-- Slideshow Container -->
                <div class="slideshow-container" id="slideshow-container">

                                                <div id="loading" class="loader"></div>
                                                <div id="slideshow" class="slideshow"></div>

                </div>      <!-- End-Tag zu <div class="slideshow-container"> -->
</div>



                 <div id="caption" class="caption-container">
                        <div class="photo-index"></div>
                        <div class="image-desc"></div>
                </div>
                

            </div>         <!-- End-Tag zu <div id="gallery" class="content">  -->

        </div>    <!-- End-Tag zu <div id="container"> -->

        <div class="gallery-gutter"></div>

        <!--
        </div>

    </div>   -->

    <div style="clear:both; height:1px; overflow:hidden; margin-bottom:-1px; padding:0;"> </div>

                        ');?>
                        </div>

 <div style="clear:both; height:1px; overflow:hidden; margin-bottom:-1px; padding:0;"> </div>
                </div>
   <?php
      include($_SERVER['DOCUMENT_ROOT'].'/ifiles/inc/body_footer.inc.php');
    ?>

  </body>
</html>

dbarthel · 23. Juni 2014

Kannst du den Thumbs denn nicht um eine entsprechende Klasse erweitern?

Vielleicht kann man an der Stelle:

Code:

$(#thumbs ul.thumbs li)

.append(class='zoom-in')

machen?

Sollte vielleicht MiniA4user nochmal drübersehen, der kennt sich aus, bei mir is es nur so eine Idee.

miniA4kuser · 24. Juni 2014

js_dev schrieb:
Ich hab jetzt in jquery.galleriffic.js Dort wo die navControls eingefügt werden den Cod um folgendes ergänzt:

Code:

this.$controlsContainer .append('<div class="full-controls"><a class="play" id="fullscreen" title="Vollbild">Vollbild</a></div>') .find('div.full-controls a') .click(function(e) { gallery.clickHandler(e,this); });

Was muss ich jetzt machen damit beim klick auf den link in den Vollbild Modus gewechselt wird?

Probier mal anstatt

Code:

.click(function(e) {
	gallery.clickHandler(e, this);
});

das hier

Code:

.click(function() {
	gallery.pause();
	if (BigScreen.enabled) {
		BigScreen.request($('#slideshow').find('img')[0]);
	}
});

js_dev · 24. Juni 2014

Funk auch noch nicht.
Ich hab jetzt:

Code:

click(function() {gallery.fullscreen();});

und dan weiter oben die Funktion und die ruft er auch auf (hab ne alert box eingefügt)

jetzt siet die Funktion so aus:

Code:

 fullscreen: function() {
	 if (BigScreen.enabled) {
		BigScreen.request($('#slideshow').find('img')[0]);
	}
},

Funktioniert aber noch nicht.

Edit: auch das funkt nicht:

Code:

 fullscreen: function() {
 var element = document.getElementById($('#slideshow').find('img')[0]);

 if (element.requestFullScreen) {
   element.requestFullScreen();
 } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
   } else if (element.webkitRequestFullScreen) {
     element.webkitRequestFullScreen();
   }
},

gibt es den IMG Tag vllt nicht?

miniA4kuser · 24. Juni 2014

js_dev schrieb:
gibt es den IMG Tag vllt nicht?

Wenn es den nicht geben würde, dann würdest du auch kein großes Bild sehen. Gemäß deinem Code aus Post #7 vergibst du die ID slideshow imageContainerSel: '#slideshow'
Um unabhängig von der ID-Vergabe zu sein probier mal folgendes:

Code:

.click(function(e) {
	gallery.pause();
	if (BigScreen.enabled) {
		BigScreen.request(gallery.$imageContainer.find('img')[0]);
	}
});

Das Problem ist, das nicht so ganz klar ist, wo du etwas änderts (hier, da, oben bei.... alert...). Wie wäre es denn mit einer Testseite?

js_dev · 24. Juni 2014

Funktioniert auch nicht. muss jetzt grad los testseite gibts bis morgenfrüh

miniA4kuser · 24. Juni 2014

js_dev schrieb:
Funktioniert auch nicht. muss jetzt grad los testseite gibts bis morgenfrüh

Okay und vergesse nicht auch mal zu schauen was evtl. in der Fehlerkonsole steht.

dbarthel · 25. Juni 2014

js_dev schrieb:
Funktioniert auch nicht. muss jetzt grad los testseite gibts bis morgenfrüh

Kann es sein, das du ganze mit einem Browser testet, der diesen FullScreen-Mode überhauptnicht unterstützt?
Das ganze klappt ja nur mit neuestem FF und Chrome, alle anderen Browser sperrst du da eh aus.

Vielleicht könnte einfacher mit screen.width und screen.height die Bildschirmauflösung ermittelt und dann einfach für jedes Bild ein neues Fenster mit diesen Werten geöffnet werden, welches das Bild enthält.

miniA4kuser · 25. Juni 2014

dbarthel schrieb:
Kann es sein, das du ganze mit einem Browser testet, der diesen FullScreen-Mode überhauptnicht unterstützt?
Das ganze klappt ja nur mit neuestem FF und Chrome, alle anderen Browser sperrst du da eh aus.

Welche Browser unterstützt werden, steht ja auf der Webseite (Link in Post #2) und ich hoffe das auch mit einem von diesen getestet wurde.

Wir werden sehen ob heute eine Testseite kommt.

@js_dev: Wenn die Seite online ist bitte noch mal genau beschreiben was nicht funktioniert, ob etwas in der Fehlerkonsole steht und mit welchem Browser tu testest.

dbarthel · 25. Juni 2014

miniA4kuser schrieb:
Welche Browser unterstützt werden, steht ja auf der Webseite (Link in Post #2) und ich hoffe das auch mit einem von diesen getestet wurde.

Trotzdem sperrt er alle Besucher seiner Seite aus, die nicht über so einen Browser verfügen.

Galleriffic.js Ausgabe Vollbild

js_dev

New member

dbarthel

Lounge-Member

js_dev

New member

js_dev

New member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member

js_dev

New member

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member

js_dev

New member

miniA4kuser

Lounge-Member

js_dev

New member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member