ilch Forum » Allgemein » HTML, PHP, SQL,... » Userbild groß darstellen, drüberfahren

Geschlossen
  1. #1
    User Pic
    heinz2 Mitglied
    Registriert seit
    05.10.2013
    Beiträge
    167
    Beitragswertungen
    2 Beitragspunkte
    Hallo Leute,

    folgende Anfrage: ich möchte in der Ansicht der Jugendwarteliste, daß ein Userbild beim darüberfahren groß dargestellt wird.
    Hier ein Beispiel: externer Link.
    Bin hier nicht fündig geweorden. Habe es mit thumbnails und onmouseover versucht in der user/memb_list.php. Habe auch selbst nicht hinbekommen. Eventuell ein Hinweis wo und was ich einbinden kann?
    Hier mal der Code der memb_list.php
    <?php
    #   Copyright by: Manuel
    #   Support: www.ilch.de
    #   erweitert by heinz2
    
    
    defined ('main') or die ( 'no direct access' );
    
    $title = $allgAr['title'].' :: User :: '.$lang['listofjugend'];
    $hmenu = $extented_forum_menu.''.$lang['listofjugend'].$extented_forum_menu_sufix;
    $design = new design ( $title , $hmenu, 1);
    $design->header();
    
    $limit = 20;  // Limit
    
    
    $tpl = new tpl ( 'jugend/memb_list.htm' );
    
    if($menu->exists('filtername')){
      $page = ($menu->getA(3) == 'p' ? $menu->getE(3) : 1 );
      $filtername = escape($menu->get(2), 'string');
    }else{
      $page = ($menu->getA(1) == 'p' ? $menu->getE(1) : 1 );
    }
    
    $anfang = ($page - 1) * $limit;
    
    $tpl = new tpl ( 'jugend/memb_list.htm' );
    
    if(isset($_GET['filtername']) AND !empty($_GET['filtername'])){
      $filtername = escape($_GET['filtername'], 'string');
    }
    
    if(!empty($filtername)){
      $sql_search=" WHERE prefix_user.name LIKE '%".$filtername."%'";
      $MPL = db_make_sites ($page , $sql_search , $limit , '?user-filtername-'.$filtername , 'user' );
    }else{
      $sql_search="";
      $MPL = db_make_sites ($page , "" , $limit , '?jugend' , 'user' );
    }
    
    $tpl->set_out ( 'SITELINK', $MPL, 0);
    
    $class = '';
    $erg = db_query("SELECT
      *
    FROM prefix_user
     LEFT JOIN prefix_grundrechte ON prefix_user.recht = prefix_grundrechte.id
    WHERE jugend LIKE '%Ju%'
     $sql_search
    ORDER by recht,prefix_user.posts DESC LIMIT ".$anfang.",".$limit);
    while ($row = db_fetch_object($erg)) {
    
    	if ($class == 'Cnorm') { $class = 'Cnorm'; } else { $class = 'Cnorm'; }
    	if (!empty($row->avatar) and file_exists($row->avatar))
    {
        $avatar = '<img alt="avatar" src="'.$row->avatar.'" border="0" width="80" />';
    } else {
        $avatar = '<img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" />';
    }
        $ar = array ( 'NAME' => $row->name,
    	                'RANG' => userrang($row->posts,$row->id),
    									'CLASS' => $class,
    									'POSTS' => $row->posts,
    									'UID'   => $row->id,
    									'DATE' => date('d.m.Y',$row->regist),
    									'GRUPE' => $row->recht_name,
                                        'JUGEND' => $row->jugend,
                                        'FAMILYNAME' => $row->familyname,
                                        'FIRSTNAME' => $row->firstname,
    									'AVATAR' => $avatar
    	);
    	$tpl->set_ar_out($ar,1);
    }
    $tpl->set_out('filtername',$filtername ? $filtername : '',2);
    
    $design->footer();
    ?>

    und der memb_list.htm
    <!-- <td>
    <a href="index.php?user-details-{UID}">
    {NAME}
    </a>
    </td>
     -->
    <td align="center">{FAMILYNAME}</td>
    <!--
    <td align="left">, </td> -->
        <td align="center">{FIRSTNAME}</td>
        <td align="left">{JUGEND}</td>
    <!-- <td align="center"><font style="font-size: 10px">{RANG}</font></td> -->
    
    <!-- <td align="center">{GRUPE}</td>
    <td>
    {DATE}
    </td>
    <td align="center">{NACHNAME}</td> -->
    
    		<td align="center">{AVATAR}</td>
      </tr>{EXPLODE}
    </table>
    <br />
    <div align="center">{SITELINK}
    <!-- <form method="GET" action="index.php"><input type="hidden" name="user" value="" /><input type="text" name="filtername" size="15" value="{filtername}" /> <input type="submit" value="{_lang_filter}" /></form> -->
    </div>


    MfG heinz2


    verwendete ilch Version: 1.1 P

    betroffene Homepage: fischerfreunde-haimhausen.de


    Zuletzt modifiziert von heinz2 am 26.02.2016 - 06:55:23
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Also die Variante, von der Seite die du gepostet hast, sollte eigentlich funktionieren.

    Du musst im Template das {AVATAR} als <img ...> denken.

    Wenn du verschieden große Bilder hast, kannst du auch in der php

    {
        $avatar = '<img alt="avatar" src="'.$row->avatar.'" border="0" width="80" />';
    } else {
        $avatar = '<img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" />';
    }


    Hier noch ein 2. img Tag mit dem größeren Bild einfügen, müsste dann allerdings entweder wie das Avatar heißen.

    Bsp:

    in $row->avatar steht includes/images/avatars/1.png du könnstest dann includes/images/avatars/big/big.png draus machen.

    mit str_replace('images/avatars/', 'images/avatars/big/', $row->avatar)

    also alles zusammen z.B.

    {
        $avatar = '<img alt="avatar" src="'.$row->avatar.'" border="0" width="80" /><img alt="avatar" src="'.str_replace('images/avatars/', 'images/avatars/big/', $row->avatar).'" border="0" class="gross"/>';
    } else {
        $avatar = '<img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" />';
    }


    Zum Testen reicht es am Anfang natürlich erstmal aus, wenn du das img Tag einfach nur nochmal mit einer Klasse hinzufügst.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    heinz2 Mitglied
    Registriert seit
    05.10.2013
    Beiträge
    167
    Beitragswertungen
    2 Beitragspunkte
    Hallo Mairu,

    habe Deinen Code aufgegriffen, etwas abgändert
        {
        $avatar = '<img alt="avatar" src="'.$row->avatar.'" border="0" width="80" />';
    } else {
        $avatar = '<div id="galerie">
    <ul>
    <li><a href="#"><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" /><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" class="gross" /></a>
    </li>
    </ul>
    </div>';
    }
    , weil so kam keine Anzeige und jetzt funktioniert es erst einmal soweit. Bis auf eins: Die hoverbilder haben immer die Breite aus der memb_list.php
    <li><a href="#"><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" /><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" class="gross" /></a>
    </li>. 
    Die Höhe ist in der style2.css anders benannt:
    [code]
    #galerie a:hover .gross
    {
    height: 350px;        /* Groesse geaendert */
    width: 350px;         /* Groesse geaendert */
    position: absolute;
    top: -50px;
    left: -50px;
    z-index: 1;
    background: #CCCCCC;
    }
    . Die Breite ist abhängig von der Breite in der ,memb_list.php. width: 350px; aus der style2.css wird nicht übernommen, auch eine andere Größenangabe nicht.
    Irgend eine Idee?
    Hier ist das bisherige Ergebnis an hand eine Testusers zu sehen:

    fischerfreunde-haimhausen.de/index.php?jugend
    Einfach mit der Maus übers das Bild des Testusers fahren.

    MfG heinz2


    Zuletzt modifiziert von heinz2 am 26.02.2016 - 23:50:02
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    Du hast auch ein width="80" drin.
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    heinz2 Mitglied
    Registriert seit
    05.10.2013
    Beiträge
    167
    Beitragswertungen
    2 Beitragspunkte
    Hallo Lord|Schirmer,

    sorry, aber das 2. width="80" war schon entfernt und es klappt trotzdem nicht. Das 1. width="80" gibt die Größe des Bilden an bei Listenansicht.
    <a href="#"><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" width="80" /><img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" class="gross" /></a>

    Es klappt auch nicht, wenn ich dem 2. (größerem) Bild eine größere Datei zuweise.
    MfG heinz2
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    Im Quelltext ist ein width="80" im Vergrößerungsbild drin.
    Hast Du die Änderung hochgeladen?




    Zuletzt modifiziert von Lord|Schirmer am 27.02.2016 - 00:21:18
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    heinz2 Mitglied
    Registriert seit
    05.10.2013
    Beiträge
    167
    Beitragswertungen
    2 Beitragspunkte
    Hallo Lord|Schirmer,
    jetzt ist ein width="80" im code drin. Dies bestimmt die Größe in dem Bildschirmausdruck, den Du gemacht hast. Fährst Du jetzt mit der Maus über das Logo bei Langenegger oder Testuser so erhällst Du diese Bild hier:
    gesperrtes Bild
    Und das ist mein Problem. Nehme ich die width="80" raus habe ich die Originalbildgröße in der Listenansicht.
    Gibt es die Möglichkeit über if und else da etwas zuzuweisen?

    MfG heinz2


    Zuletzt modifiziert von heinz2 am 27.02.2016 - 01:12:09
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    Sieht nach CSS Problematik aus.
    Du hast auch galerie a .gross 2x definiert (style.css/style2.css).

    Ich würde img direkt ansprechen.

    Hier mal ein Beispiel in JSFIDDLE
    jsfiddle.net/0o9eLtv7/3/


    Zuletzt modifiziert von Lord|Schirmer am 27.02.2016 - 09:42:50
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    heinz2 Mitglied
    Registriert seit
    05.10.2013
    Beiträge
    167
    Beitragswertungen
    2 Beitragspunkte
    Hallo Leute,

    habs Dank Eurer Hinweise in der style.css gefunden. Hier war die img- Definition auf 100% gestellt und das hat verursacht, dass die Bild-Originalgrösse der Bilder zur Anwendung herangezogen wurde. Ich habe es auf Auto gestellt und es funktioniert. Werde also das gesamte Projekt auf solche kleinen Fehler kontrollieren.
    Jetziger Code
    {
        $avatar = '<div id="galerie">
    <ul>
    <li><a href="#"><img alt="avatar" src="'.$row->avatar.'" border="0" /><img alt="avatar" src="'.str_replace('images/avatars/', 'images/avatars/', $row->avatar).'" border="0" class="gross" /></a></li>
    </ul>
    </div> ';
    }
     else
    {
        $avatar = '
        <img alt="avatar" src="include/images/avatars/wurstegal.jpg" border="0" />';
    }


    MfG heinz2
    Kann geschlossen weden
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten