• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Galleriffic.js Ausgabe Vollbild

J

js_dev

New member
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
 
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
 
Zuletzt bearbeitet:
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?
 
Hatte Galleriffic bis jetzt nicht im Einsatz, aber hat das nicht sowas wier customevents? Könnte man doch darüber einbinden.
 
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>
 
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>
 
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.
 
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?
Zum Vergrößern anklicken....

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]);
	}
});
 
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?
 
Zuletzt bearbeitet:
js_dev schrieb:
gibt es den IMG Tag vllt nicht?
Zum Vergrößern anklicken....
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 schrieb:
Funktioniert auch nicht. muss jetzt grad los testseite gibts bis morgenfrüh
Zum Vergrößern anklicken....

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.
 
Zuletzt bearbeitet:
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.
Zum Vergrößern anklicken....
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben