Shadowbox and domready event

[tclark]

Firstly I just wanted to say Phoca Gallery is really great and has suited my needs for a personal blog/photo site perfectly. Keep up the great work. I had finished my site but during testing I noticed that if I clicked on an image too quickly shadowbox would not load but instead the image would open on a blank page. When I waited for the page to load shadowbox would load normally.

On viewing the output of my webpage I noticed Shadowbox is being called with the window.onload function see below:

Code: Select all

<script type="text/javascript">
Shadowbox.loadSkin("classic", "/components/com_phocagallery/assets/js/shadowbox/src/skin");
Shadowbox.loadLanguage("en", "/components/com_phocagallery/assets/js/shadowbox/src/lang");
Shadowbox.loadPlayer(["img"], "/components/com_phocagallery/assets/js/shadowbox/src/player");
window.onload = function(){
	Shadowbox.init();
}
</script>

I want to be able to use the domready event instead. I am hoping the code below would do the trick??

Code: Select all

<script type="text/javascript">
Shadowbox.loadSkin("classic", "/components/com_phocagallery/assets/js/shadowbox/src/skin");
Shadowbox.loadLanguage("en", "/components/com_phocagallery/assets/js/shadowbox/src/lang");
Shadowbox.loadPlayer(["img"], "/components/com_phocagallery/assets/js/shadowbox/src/player");
window.addEvent('domready', function() {
	Shadowbox.init();
}
</script>

My question is where in the phoca gallery component can I change this, which php/js file is this coming from? I would also like to load additional shadowbox players, my guess is it is in the same php file? Any help would be greatly appreciated.

[tclark]

I fixed this by modifying the
components/com_phocagallery/views/category/view.html.php file


replaced this:

Code: Select all

window.onload = function(){
   Shadowbox.init();
}

with this:

Code: Select all

window.addEvent(\'domready\', function(){
           Shadowbox.init();
});

See my original post for a larger code snippet to help you find the section of code within the file.

[Jan]

Great, thank you for this info, I think, this is good idea, so I will change it in the next version...

Jan

[gerilla]

good idea. it was really bothering. thanks...

[blablast]

Hi,
I'd like to ask how can I show first image in gallery in Shadowbox after page load.
I've add code:

Code: Select all

  if (document.getElementById(\'firstImageInGallery\') <> null) {
	    var linkToFirstImageInGallery=document.getElementById(\'firstImageInGallery\').href;
		window.location.href=linkToFirstImageInGallery;
	  };

after:

Code: Select all

Shadowbox.init();

and next in gallery description I've put:

Code: Select all

<a rel="shadowbox[PhocaGallery];options={slideshowDelay:3}" href="images/phocagallery/Category1/thumbs/phoca_thumb_l_image1.jpg" id="firstImageInGallery" class="shadowbox-button">___</a>

but this doesn't work.
So my idea is to add first element in gallery id='firstImageInGallery' and next open this link immedietly after load page.
How to do this?
Blazej

[Jan]

Hi, shadowbox only displays images which are listed on the site... so it displays the first image of listed images (thumbnails)

Jan

[blablast]

Thank you for your reply.
I've done what I would in that way (but without Phoca Gallery )in that way:
I've added code my template:

Code: Select all

<script type="text/javascript">
  window.addEvent('domready',function() {
    if (document.getElementById('firstImageInGallery')==null) {
    } else {
      var openShadowbox = function(myImage) {
        Shadowbox.open ( {
          content: myImage,
          gallery:'myGallery',
          type: 'img'
        })
      };
      if(window.onload) {
        var temp = window.onload;
        window.onload=function(e) {
          temp(e);
          openShadowbox(document.getElementById('firstImageInGallery').href);
        };
      } else {
        window.onload=function(e) { 
          openShadowbox(document.getElementById('firstImageInGallery').href);
        };
      }
    }
  })
</script>

So I need to name gallery to myGallery and give to first image id='firstImageInGallery'.

That's all. Now after loading page I can see first image in gallery on top.
Look at this: http://www.strus.com.pl/nadruki-sitodru ... jalne.html

Think about putting this "usability" into your great component.
Blazej

[Jan]

Ok, thank your for this code, I will take a look at it...

Jan