Userbild groß darstellen, drüberfahren

Gehe zu Seite:

Geschlossen

Do. 25.02.2016 23:13 Uhr #1

heinz2 Mitglied

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.

zitieren

Fr. 26.02.2016 07:20 Uhr #2

Mairu Coder

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.

zitieren

Fr. 26.02.2016 21:51 Uhr #3

heinz2 Mitglied

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.

zitieren

Sa. 27.02.2016 00:02 Uhr #4

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

Du hast auch ein width="80" drin.

rules :: doku :: faq :: linkus
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 27.02.2016 00:08 Uhr #5

heinz2 Mitglied

Registriert seit
05.10.2013

Beiträge
167

Beitragswertungen

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.
?
1
<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.
- zitieren
Sa. 27.02.2016 00:20 Uhr #6

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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.
- zitieren
Sa. 27.02.2016 00:40 Uhr #7

heinz2 Mitglied

Registriert seit
05.10.2013

Beiträge
167

Beitragswertungen

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:

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.
- zitieren
Sa. 27.02.2016 09:36 Uhr #8

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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.
- zitieren

So. 28.02.2016 00:01 Uhr #9

heinz2 Mitglied

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.

zitieren

Beitrag zur Merkliste hinzufügen

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