0

Im trying to make simple gallery on my page. When the gallery section of the web is opened, there are simply some pictures displayed by src and href tags:

echo '<div style="float:left; margin:5px;">
    <a href="'.$link.'"><img src="'.$mini.'" title="clickclack.cz" alt="clickclack.cz" style="height:171px; border:2px solid black;" /></a>
</div>';

Now - When I click on some of these pictures, I don´t simply want to show full-sized image on the white background. I want to open it in Galleria plugin and to have possibility of scrolling to other images on that page. I can´t figure out how to do this. If I wrap the div with pictures in <div id="galleria" style="height:500px;">, the plugin starts immediately when I open the gallery section.

JS part of the code is very basic:

    $(function() {
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');              
});

EDIT: I found a solution. By PHP conditions, first I set the href parameter to href="?galerie&inGallery&index='.$i.'". The galerie parameter just means to open the same page Im on, index is number of the row in while cycle (it matches the index in Galleria) and inGallery sets the PHP condition. With inGallery parameter in URL the block with pictures is now wrapped in <div id="galleria"> and href parameter is actual link to the image. So now the gallery page is opened in Galleria. To open Galleria on clicked image, I added JS function. My JS part (which is also wrapped in the condition if(isset($_GET['inGallery']))) now looks like this (plus I added link with id="fullscreen" to toggle the fullscreen):

function GetURLParameter(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++){
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam){
        return sParameterName[1];
    }
}
}
$(function() {
        var index = GetURLParameter('index');
        Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
        Galleria.run('#galleria', { show: index });
        $('#fullscreen').click(function() {
          $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
        });

    });
Michal S
  • 1,103
  • 6
  • 19
  • 31
  • Please provide more specific information, especially js code. You probably want to change the trigger launching gallery plug-in. – Michał Feb 20 '14 at 10:50
  • My galleria js code is simply `$(function() { Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); });` – Michal S Feb 20 '14 at 15:21
  • I found out that probably I must somehow tell the plugin with which image index it should start...but the galleria documentation didn´t prove very helpful, there are only very basic examples and no description, how to do these things... – Michal S Feb 20 '14 at 15:27
  • I would try: $(document).on("click", "img", function(){ /*call galeria here, use $(this) to operate on clicked image*/}); – Michał Feb 21 '14 at 15:22

1 Answers1

0

You need to use the show method. From the link "Shows the image specified as index. You can call this method anytime and the image will be placed in a transition queue."

pk.
  • 956
  • 7
  • 13