0

I am trying to implement a photo gallery(I think all of you already know about it, because i post a lot of questions :) ). If i assign a function in onclick property of a DOM element the function works ok.

var img_thumb = document.createElement('img');
img_thumb.src = photos[i].img_thumb; 

img_thumb.onclick = function showImage(img_thumb) {
   var index = arr_thumb.indexOf(img_thumb.target);
   document.getElementById('largeImgPanel').appendChild(arrow_right);
   document.getElementById('largeImg').src = arr_big[index].src;
   showLargeImagePanel();
   unselectAll();
};

Now this is just functions, if i try to add here same showImage function and call it on click the arrow to change displayed picture it is does not work.

function showLargeImagePanel() {
    document.getElementById('largeImgPanel').style.visibility = 'visible';
}

function unselectAll() {
   if(document.selection) document.selection.empty();
   if(window.getSelection) window.getSelection().removeAllRanges();
}

I tryed to rewrite it in different ways but there is no changes, if i click the arrow the "largeImagePanel" just closes.

Here is my last version of showImage function:

function showImage(img_src) {
   document.getElementById('largeImg').src = img_src;
   showLargeImagePanel();
   unselectAll();
};

Can someone give me any idea about my problem?

if i write same property "onclick" to arrow object, the "largeImgPanel" closes again >:

arrow_right.onclick = function() {
    document.getElementById('largeImgPanel').appendChild(arrow_right);
    document.getElementById('largeImg').src = next;
    showLargeImagePanel();
    unselectAll();
};
Gudron Swiss
  • 445
  • 1
  • 4
  • 6
  • You might want to study up on adding event handlers and what those functions supply as arguments (hint: it's an event object). – Robusto Oct 16 '13 at 16:45
  • Indent your code. It helps reading *and* writing it. – ComFreek Oct 16 '13 at 16:45
  • If I understand your question correctly, you are expecting something other than the *browser specified default* to happen when a *click event* is triggered without adding a *click event listener*? Also this is one of those cases where using jQuery or any other JS library might be a good idea.. – PhilTrep Oct 16 '13 at 16:50
  • Try to use object.style.display="" and object.style.display="none" instead of of visibility. Edit: And use display property in CSS if you use that. – Atle Oct 16 '13 at 16:50
  • @Atle *Display and Visibility do not have the same effect...* http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – PhilTrep Oct 16 '13 at 16:53
  • I know, just have a better feeling about the first, don't know why. – Atle Oct 16 '13 at 16:57
  • Can you provide a link to the full page? – Atle Oct 16 '13 at 19:39

0 Answers0