Bildswitcher

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bildswitcher

    Hi zusammen,

    Kaum kennt man sich ein bisschen in PHP aus, schon verlangt das Ziel nach Java. Ich öffnt mittels Javascript eine neue Seite. Dort nutze ich die tapview Klasse. Nun soll auf dem dritten Tap folgendes realisiert werden.

    Oben sieht man 8 Vorschaubilder, wenn man auf eines davon klickt erscheint das jeweilige Bild darunter in voller Größe. Folgenden Code habe ich zusamengesucht:

    Quellcode

    1. <script type="text/javascript" language="javascript">
    2. var bilder = new Array('userpics/9-XcSsdpGTJW.JPG','userpics/9-ZL5u36TxQq.jpg');
    3. var zaehler = 0;
    4. var anzeigen = 0;
    5. function Bilderwechsel(grafik)
    6. {
    7. zaehler++;
    8. anzeigen = zaehler%2;
    9. grafik.src = bilder[anzeigen];
    10. }
    11. </script>
    Alles anzeigen


    Quellcode

    1. </head>
    2. <body>
    3. <img src="userpics/9-XcSsdpGTJW.JPG" onClick="Bilderwechsel(this);">
    4. </body>
    5. </html>


    Mit diesem Code kann ich beim Klick auf das große Bild ein Bild weitergehen, ich benötige aber die funktion das je nachdem welches Bild (von den Vorschaubildern) angeklickt wird sich genau dieses eben unten in groß darstellt.

    Vielen Dank für eure Hilfe schon mal vorab.

    Grüße,
    Matthias
    Das Leben ist binär - du bist eine 1, oder eine 0

  • Könntest du uns bitte die komplette Seite inkl. aller eingebundenen Skripte etc. schicken. Aus deinem Skriptfetzen kann ich beim besten Willen nichts sinnvolles herleiten.
    Und möge einer der Mods den Thread hier bitte ins JavaScript Forum verschieben.
    java-ist-nicht-javascript.de/
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • Hi!

    Danke erstmal für die Antworten, stimmt, Java ist nicht gleich Javascript.

    Hier mal der komplette Code, mittlerweile habe ich es eigentlich auch schon gelöst, das einzige Problem derzeit ist noch das ich zweimal auf das Bild klicken muss damit es in groß angezeigt wird da es beim ersten klicken quasi "on the fly" erstellt wird und auch angezeigt werden soll,das geht natürlich nicht, vielleicht habt ihr ja ne Idee wie ich das noch lösen kann.

    Quellcode

    1. function resize($imagePath,$opts=null){
    3. ## this is the only thing that needs configuring..
    4. $cacheFolder = $_SERVER['DOCUMENT_ROOT'].'/klubbix/resizing/cache/';
    5. $quality = 50;
    6. ## you shouldn't need to configure anything else beyond this point
    8. if(file_exists($imagePath) == false){
    9. $imagePath = $_SERVER['DOCUMENT_ROOT'].$imagePath;
    10. if(file_exists($imagePath) == false){
    11. return 'image not found';
    12. }
    13. }
    15. if($opts['w']){ $w = $opts['w']; }
    16. if($opts['h']){ $h = $opts['h']; }
    18. $fileParts = explode('.',$imagePath);
    19. $count = count($fileParts) - 1;
    20. $ext = $fileParts[$count];
    22. $imgPath = str_replace('.'.$ext,'',$imagePath);
    24. $filename = md5_file($imagePath);
    26. if($w and $h){
    27. $newPath = $cacheFolder.$filename.'_w'.$w.'_h'.$h.($opts['scale'] == true ? "_scaled" : "").'.'.$ext;
    28. }elseif($w){
    29. $newPath = $cacheFolder.$filename.'_w'.$w.'.'.$ext;
    30. }elseif($h){
    31. $newPath = $cacheFolder.$filename.'_h'.$h.'.'.$ext;
    32. }else{
    33. return false;
    34. }
    36. $create = true;
    38. if(file_exists($newPath) == true){
    40. $create = false;
    42. $origFileTime = date("YmdHis",filemtime($imagePath));
    43. $newFileTime = date("YmdHis",filemtime($newPath));
    45. if($newFileTime < $origFileTime){
    46. $create = true;
    47. }
    49. }
    51. if($create == true){
    52. if($w and $h){
    54. list($width,$height) = getimagesize($imagePath);
    56. $resize = $w;
    58. if($width > $height){
    59. $resize = $w;
    60. if($opts['crop'] == true){
    61. $resize = "x".$h;
    62. }
    63. }else{
    64. $resize = "x".$h;
    65. if($opts['crop'] == true){
    66. $resize = $w;
    67. }
    68. }
    70. if($opts['scale'] == true){
    71. exec("convert ".$imagePath." -resize ".$resize." -quality ".$quality." ".$newPath);
    72. }else{
    73. exec("convert ".$imagePath." -resize ".$resize." -size ".$w."x".$h." xc:".($opts['canvas-color']?$opts['canvas-color']:"transparent")." +swap -gravity center -composite -quality ".$quality." ".$newPath);
    74. }
    76. }elseif($w){
    77. exec("convert ".$imagePath." -thumbnail ".$w."".($opts['maxOnly'] == true ? "\>" : "")." -quality ".$quality." ".$newPath);
    78. }elseif($h){
    79. exec("convert ".$imagePath." -thumbnail x".$h."".($opts['maxOnly'] == true ? "\>" : "")." -quality ".$quality." ".$newPath);
    80. }
    81. }
    83. return str_replace($_SERVER['DOCUMENT_ROOT'],'',$newPath);
    85. }
    Alles anzeigen


    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
    5. <meta http-equiv="PICS-Label"content="">
    6. <meta name="generator" MyOwnHand">
    7. <link rel="STYLESHEET" href="style.css" type="text/css">
    8. <link rel="stylesheet" type="text/css" href="tab-view.css" />
    9. <title>Der Titel dieser Seite</title>
    10. </head>
    11. <body>
    14. <?php
    15. include("functions.php");
    16. $userid = $_GET['userid'];
    17. dbconn();
    18. $sql = mysql_query("SELECT * FROM userdata WHERE userid = '$userid'");
    19. $userdata = mysql_fetch_assoc($sql);
    22. $existingpics = getpics($userid);
    24. $mainpic = $existingpics['0']['0'];
    25. $points = getpoints($userid);
    28. ?>
    31. <?php $id = isset($_GET['id']) ? $_GET['id'] : 1; ?>
    33. <div class="TabView" id="TabView">
    36. <!-- ***** Tabs ************************************************************ -->
    38. <div class="Tabs" style="width: 452px;">
    39. <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
    40. <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
    41. <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Bilder</a>
    42. </div>
    45. <!-- ***** Pages *********************************************************** -->
    47. <div class="Pages" style="width: 600px; height: 600px;">
    48. <div class="Page" style="display: <?=($id == 1) ? 'block' : 'none';?>"><div class="Pad">HALLO</div></div>
    49. <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>"><div class="Pad">SEITE 2</div></div>
    50. <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>"><div class="Pad">
    52. <?php
    53. foreach($existingpics as $picname)
    54. {
    55. echo "<a href=\"javascript:ladMirEinBild('".resize($picpath.$picname['0'],array('w'=>500))."','grossesBild')\">";
    56. echo "<img src=\"".resize($picpath.$picname['0'],array('w'=>75,'h'=>75))."\"/></a>";
    57. }
    59. ?>
    60. <br><br>
    61. <center><img src="<?php echo resize($picpath.$picname['0'],array('w'=>500)); ?>" id="grossesBild" /></center>
    62. </div>
    64. </div>
    65. </div>
    67. </div>
    69. <script type="text/javascript" src="tab-view.js"></script>
    70. <script type="text/javascript">
    71. tabview_initialize('TabView');
    72. </script>
    74. </body>
    75. </html>
    Alles anzeigen


    Grüße,
    Matze
    Das Leben ist binär - du bist eine 1, oder eine 0