1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Bildgröße ändern via Mouseover??

Dieses Thema im Forum "Design" wurde erstellt von poet, 21. Januar 2012.

Schlagworte:
  1. poet

    poet Member

    Registriert seit:
    20. Januar 2012
    Beiträge:
    6
    Zustimmungen:
    0
    Hallo!
    Ich möchte einen Fotoblog erstellen, wo ich in jedem Beitrag ein Bild vorstelle.
    Dieses möchte ich nicht über eine Gallerie einstellen, sondern über den Content Upload einfach in den Artikel einfügen.
    Nun suche ich eine Möglichkeit, wie ich es machen kann, dass bei einem Mouseover das Bild im Artikel (bsp. 500x250 px) in einer anderen Auflösung (bsp. 1200x400 px) angezeigt wird und beim wegbewegen der maus wieder verschwindet.
    Gibt es da nen html Befehl oder sowas, was men nehmen kann?
    Wäre dankbar für Ratschläge!!
    THX
     
    #1 poet, 21. Januar 2012
  2. PKdesignz

    PKdesignz Well-Known Member

    Registriert seit:
    4. Mai 2011
    Beiträge:
    60
    Zustimmungen:
    0
    Ich schätze, dieser Artikel gehört in die "Plugin"-Sektion... versuch es mal mit diesem Plugin: http://wordpress.org/extend/plugins/expand-images/

    Ich habe das Plugin noch nicht getestet und weiß nicht, ob es den gewünschten Effekt erzielt...
     
    #2 PKdesignz, 22. Januar 2012
  3. poet

    poet Member

    Registriert seit:
    20. Januar 2012
    Beiträge:
    6
    Zustimmungen:
    0
    Hallo!
    Leider hat dieses Plugin keine nützliche Funktion diesbezüglich!
    Beim draufklicken öffnet sich das Bild in Originalgröße in einem neuen Fenster - so gehts auch ohne Plugin, aber so möchte ich es ja nicht haben.
    Trotzdem danke!
    Sonst jemand ne Idee?
     
    #3 poet, 22. Januar 2012
  4. poet

    poet Member

    Registriert seit:
    20. Januar 2012
    Beiträge:
    6
    Zustimmungen:
    0
    So, habe mal das FanzyZoom Plugin probiert, welches anscheinend genau das kann, was ich suche!
    Aber entweder bin ich zu blöd - oder es funktioniert schlicht und ergreifend nicht!
    Vorgehen:
    - Ich habe das Plugin installiert und aktiviert
    - Habe die Bilder wie vorgegeben in den Beitrag eingefügt:
    <a href="image.jpg" title="An image"><img src="image-thumbnail.jpg" /></a>
    - und was passiert:
    Das Bild öffnet sich wieder in einem neuen Tab - langsam verze´weifel ich - das kann doch nicht so schwer sein *argl*
    Wäre sehr dankbar für ne Lösung!!
    THX
     
    #4 poet, 22. Januar 2012
  5. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    #5 Tutrix, 23. Januar 2012
  6. Motittot

    Motittot Member

    Registriert seit:
    12. November 2011
    Beiträge:
    17
    Zustimmungen:
    0
    @ Art of Pic:
    in welchen Ordner kommen die Dateien?

    Danke
     
    #6 Motittot, 24. Januar 2012
  7. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    die .js Dateien kommen in den Ordner des verwendeten Themes
    wenn dort schon ein "js"-Ordner vorhanden, darein, sonst einen anlegen
    wenn du den Überblick behalten willst, welche Dateien zu welcher Anwendung gehören, kannst du auch einen extra Ordner anlegen z.B. "mouseover"
    die Dateien dann innerhalb <head>.....</head>, der header.php deines Themes verlinken
    wie der Effekt dann aufgerufen wird, siehst du in der index.html des Beispiels, einfach mal mit einem Editor öffnen
    die Pfade zu den Dateien, sowie der Bilder, müssen natürlich stimmen
     
    #7 Tutrix, 24. Januar 2012
  8. mele

    mele Member

    Registriert seit:
    27. Januar 2010
    Beiträge:
    15
    Zustimmungen:
    0
    hallo Art of Pic,
    ich habe die Beiträge interessiert gelesen und wollte dies bei mir nachstellen, habe ich es richtig verstanden, ich brauche diese o.g. plugins gar nicht mehr für den mouseover effekt.
    Ich habe Deine Ergänzungen in die header.php eingetragen und die js-dateien beim theme-ordner hinterlegt, leider klappt da gar nichts wie im beispiel mit der index.html ausführbar wird...muss da noch in der style.css was rein oder page.php (es wird ja im artikel oder auf der stat. seite zur anzeige gebracht)..für Tips wäre ich sehr dankbar!
    gruss mele
     
    #8 mele, 28. Januar 2012
  9. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    @mele
    Ich weiß nicht was du umsetzen möchtest.
    Dieser Mouseover Effekt ist eine Tooltip-Spielerei, funktioniert logischerweise auch nur bei relativ kleinen Mouseoverbildern, ist also nicht zu vergleichen mit Plugins wo bei Klick auf das Thumbnail, das Bild in Originalgröße betrachtet werden kann.

    zu Anwendung:
    das
    hast du gelesen?
    da findest du z.B. den CSS-Code
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und auch wie die Bilder in den Artikel eingefügt werden müssen
    wenn alles korrekt eingefügt und die .js-Dateien richtig verlinkt, dann funktioniert das auch...
    siehe http://s14.directupload.net/file/d/2783/f68rf3yz_gif.htm
     
    #9 Tutrix, 28. Januar 2012
    Zuletzt bearbeitet: 28. Januar 2012
  10. mele

    mele Member

    Registriert seit:
    27. Januar 2010
    Beiträge:
    15
    Zustimmungen:
    0
    nun folgende einträge habe ich beispielhaft gemacht um das nachzustellen (nicht produktiv, nur lokal);

    1) header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="author" content="TEST" />
    <meta name="robots" content="INDEX, FOLLOW"/>
    <title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); if(get_bloginfo('name') != "") echo ' - ' ; bloginfo('name'); }
    elseif (is_single() ) { single_post_title(); }
    elseif (is_page() ) { bloginfo('name'); if(get_bloginfo('name') != "") echo ': '; single_post_title(); }
    else { wp_title('',true); } ?></title>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/test.ico" />
    <?php wp_head(); ?>
    </head>

    2) style.css:

    /* begin Page */
    body, p
    {
    margin: 0.5em 0;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    text-align: justify;
    }
    #preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

    3) auf der wp-Seite:

    <ul>
    <li><a href="http://localhost/wordpress/wp-content/images/veranstaltungen/1.jpg" class="preview"><img src="http://localhost/wordpress/wp-content/images/veranstaltungen/1s.jpg" alt="gallery thumbnail" /></a></li>
    </ul>

    Das Ergebnis ist dies, dass nur im 2ten tab das vergrösserte bild angezeigt wird oder halt meine lightbox2 die mit dem preview irgendwie angesprochen wird ?!
    ich habe leider von css, html nicht viel ahnung, für tips wäre ich dir sehr dankbar!
    viele grüße mele
     
    #10 mele, 28. Januar 2012
  11. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    "Verwende doch bitte den entsprechenden BBcode, um Code hier im Beitrage einzufügen."

    zur header.php
    du hast einfach nur den Code aus der Demo-index.html übernommen...also Pfade anpassen, damit die Dateien auch gefunden werden

    zur style.css
    hier hast du den kompletten Style der Demo-index.html übernommen, statt nur den für "preview" Class

    wenn du sowieso ein Lightbox-Plugin verwendest, wozu dann noch diese Tooltip-Spielerei...beides zusammen muss ja zu Problemen führen
    also entscheide dich für Eins von Beiden
     
    #11 Tutrix, 28. Januar 2012
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden