Jquery - Eigene Lightbox mit einem "kleinen" Fehler

W

weedo

Erfahrenes Mitglied
Hi,

ich habe angefangen, mit jQuery ein Script zu bauen, was ähnlich wie die Lightbox funktionieren soll. Hintergrund ist, dass ich einfach nicht gerne in anderen Scripts rumfusche...

Das Script entspricht beim Öffnen eines Bildes auch annähernd meinen Vorstellungen. Öffne ich aber ein anderes Bild, werden bei den Berechnungen von Größe und Position die Daten aus dem ersten Bild genomen.

Im Grunde müsste ich nur wissen, wie ich das Img-Objekt wieder zurücksetze, damit ich wieder von vorne starten kann.

Um mein Problem verständlich besser rüberzubekommen, hier mein Code:

HTML: 
<script src="js/jquery.js"></script>
<script>
  function start() {
    $("#imgShow").animate({
      opacity: 0
    }, 1000, function() {
      document.getElementById("imgShow").style.display = "inline";
    });
    $("#imgShowed").animate({
      opacity: 0
    }, 1, function() {
      document.getElementById("imgShowed").style.display = "inline";  
    });
  }
  function showImg(o) {
    document.getElementById("imgShow").style.display = "inline";
    document.getElementById("imgShowed").style.display = "inline";
    imgSrc = document.getElementById(o).src;
    newImg = document.getElementById("imgShowed");
    newImg.src = imgSrc;
    newImgX = newImg.offsetWidth;
    newImgY = newImg.offsetHeight;
    center = document.getElementById("imgShow").offsetWidth / 2;
    middle = document.getElementById("imgShow").offsetHeight / 2;
    if(newImgX >= newImgY) {
      if(newImgX >= 601) {
        newImg.width = 600;
        newImg.height = 600 * newImgY / newImgX;
        newImgTop = newImg.height / 2;
        newImg.style.top = middle - newImgTop;
        newImg.style.left = center - 300;
      } else {
        newImg.width = newImgX; 
        newImg.height = newImgY;
        newImgTop = newImg.height / 2;
        newImgLeft = newImg.width / 2;
        newImg.style.top = middle - newImgTop;
        newImg.style.left = center - newImgLeft;
      } 
    } else {
      if(newImgY >= 401) {
        newImg.height = 400;
        newImg.width = 400 * newImgX / newImgY;
        newImgLeft = newImg.width / 2;
        newImg.style.top = middle - 200;
        newImg.style.left = center - newImgLeft;
      } else {
        newImg.width = newImgX; 
        newImg.height = newImgY;
        newImgTop = newImg.height / 2;
        newImg.style.top = middle - newImgTop;
        newImg.style.left = center - 300;        
      }
    }
    newImg.style.border = "25px solid #fff";
    newImg.style.borderBottom = "50px solid #fff";
    $("#imgShow").animate({
      opacity: 0.8
    }, 400, function() {
      $("#imgShowed").animate({
        opacity: 1
      }, 500, function() {
      
      });
    });
  } 
  function hideImg() {
    $("#imgShow").animate({
      opacity: 0
    }, 400, function() {
      
    });
    $("#imgShowed").animate({
      opacity: 0
    }, 400, function(){
    
    });
    document.getElementById("imgShow").style.display = "none";
    document.getElementById("imgShowed").style.display = "none";
  }
  document.onkeydown = function(event) {
    if(event.keyCode==27) {
      hideImg();
    }
  }
</script>
<body onload="start();">
<img id="imgShowed" style="position: fixed; background: #fff; display: none; z-index: 11; top: 50px;" />
<table>
  <tr>
    <td>
      <a href="javascript:showImg('IMG_0232.jpg');"><img src="galerie/IMG_0232.jpg" id="IMG_0232.jpg" width="200" /></a>
    </td>
    <td>
      <a href="javascript:showImg('IMG_0233.jpg');"><img src="galerie/IMG_0233.jpg" id="IMG_0233.jpg" width="200" /></a>
    </td>
    <TD>
      <a href="javascript:showImg('InnervationFruit_2001.jpg');"><img src="galerie/InnervationFruit_2001.jpg" id="InnervationFruit_2001.jpg" width="200"/></a>
    </TD>
    <td>
      <a href="javascript:showImg('logo');"><img src="logo.PNG" id="logo" width="200" /></a>
    </td>
  </tr>
</table>
</body>

<div id="imgShow" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-color: #000; z-index: 10; display: none;"></div>

Lg weedo
 
Moin,

Mal ne Frage, wenn du jQuery verwendest, warum nimmst du dann nicht die Selektoren von jQuery?
Überall ein gemisch von normalem JS und jQuery wie zb:
1.
HTML: 
$("#imgShow").animate({
      opacity: 0
    }, 1000, function() {
      document.getElementById("imgShow").style.display = "inline";
    });

könntest du dir abkürzen:
HTML: 
$("#imgShow").animate({
      opacity: 0
    }, 1000, function() {
     $("#imgShow").show();
    });
und das im ganzen Script.

2.
Warum verwendest du den Body-onload? ist mit jQuery nicht nötig:
HTML: 
<script type="text/javascript">
$(document).ready(function(){
start();
});
</script>

3. Sollte man JS-Code nicht mehr im HTML verwenden.
zb:
HTML: 
<td>
      <a href="javascript:showImg('IMG_0232.jpg');"><img src="galerie/IMG_0232.jpg" id="IMG_0232.jpg" width="200" /></a>
    </td>

wird zu:
HTML: 
<script type="text/javascript">
$(document).ready(function(){
start();
$(".imgLink").click(function(){
var img = $(this).attr('rel');
showImg(img);
});
</script>

<td>
      <a href="#" rel="IMG_0232.jpg" class="imgLink"><img src="galerie/IMG_0232.jpg" id="IMG_0232.jpg" width="200" /></a>
    </td>
 
Zuletzt bearbeitet:
Jquery - Eigene Lightbox mit einem ...

Hi,

Um ehrlich zu sein hab ich mir da noch nie Gedanken darum gemacht und bis jetzt hat mir das auch noch nie jemand gesagt, dass es so auch geht. Ich danke dir für deine Kritik!

Ich werde das nochmal überarbeiten.

Hast du eventuel eine Idee, wie ich die Attribute hight und width zurücksetzen kann?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück