Jump to content

Cum Sa Adaug Tooltip La Imagine Thumbnail In Wordpress


Recommended Posts

Va trebui sa modifici/adaugi CSS-ul WordPress-ului cu informatiile prezentate in exemplu, iar la adaugarea unei imagini sa folosesti clasa folosit pentru tooltip, ca de exemplu:

<a href="#" class="tooltip">Tooltip<span>
<img class="callout" src="src/callout.gif" /> <strong>Most Light-weight Tooltip</strong><br />

Calea mai simpla este folosirea unui plugin: http://wordpress.org/extend/plugins/wp-image-tooltip/ (care totusi este cam vechi)


De asemenea, vezi si: http://wplift.com/how-to-add-tooltips-to-wordpress sau http://wordpress.org/extend/plugins/search.php?q=jquery+tooltip&sort

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.

Link to comment
Share on other sites


Nu mai vreau sa mai adaug inca un plugin ca ma deja multe instalate

Problema e ca nu stiu cum sa adaug codul

Unde trebuie adaugat in Function.php

Eu vreau sa apara la fiecare imagine care este in chenar subtire textul "Vizualizare poza"

Sa apara acelasi text la toate pozele thumbnail in momentul in care se pune cursorul de la mouse sa apara textul "Vizualizare poza"

Exemplu din site Amandina la fel si la urmatoarele poze

Codul css gasesc unde sa il adaug

Multumesc de raspuns

Link to comment
Share on other sites

Am gasit un cod care functioneaza dar nu stiu cum sa il adaptez pentru site-ul meu

Codul css:

a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:60px; margin-left:-160px; width:240px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0; } .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; opacity: 0.8; }

Codul Html:

<a href="#" class="tooltip"> Tooltip <span> <img class="callout" src="src/callout_black.gif" /> <strong>Most Light-weight Tooltip</strong><br /> This is the easy-to-use Tooltip driven purely by CSS. </span> </a> <a href="#" class="tooltip"> <img src="../img/demo/css-tooltip-image.gif" /> <span> <img class="callout" src="src/callout_black.gif" /> <strong>CSS only Tooltip</strong><br /> <img src="../img/demo/css-tooltip-image.gif" style="float:right;" /> Pure CSS popup tooltips with clean semantic XHTML. </span> </a>

Cum adaug codul html in function php? In function.php am gasit urmatorul cod:

if (!function_exists('theme_get_post_thumbnail')){
function theme_get_post_thumbnail($args = array()){
global $post;
$size = theme_get_array_value($args, 'size', array(theme_get_option('theme_metadata_thumbnail_width'), theme_get_option('theme_metadata_thumbnail_height')));
$auto = theme_get_array_value($args, 'auto', theme_get_option('theme_metadata_thumbnail_auto'));
$featured = theme_get_array_value($args, 'featured', theme_get_option('theme_metadata_use_featured_image_as_thumbnail'));
$title = theme_get_array_value($args, 'title', get_the_title());
$result = '';
if ($featured && (function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
the_post_thumbnail($size, array('alt' => '', 'title' => $title));
$result = ob_get_clean();
} elseif ($auto) {
$attachments = get_children(array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID'));
if($attachments) {
$attachment = array_shift($attachments);
$img = wp_get_attachment_image_src($attachment->ID, $size);
if (isset($img[0])) {
$result = '<img src="'.$img[0].'" alt="" width="'.$img[1].'" height="'.$img[2].'" title="'.$title.'" class="wp-post-image" />';


Multumesc pentru ajutorul acordat

Link to comment
Share on other sites

Buna tuturor

Am urmatorul cod html si css pe site-ul http://www.menucool....tip/css-tooltip
Am primit un raspuns ca se poate adauga in felul urmator http://codex.wordpre...rg/Child_Themes
A mai facut cineva asa ceva?
Cum trebuie sa procedez eu?
Eu vreau sa apara acest tooltip la imaginea mica cu chenar rosu si sa fie scris textul "Vizualizare poza" cand se pune cursourul de la mouse pe poza mica thumbnail.
Va multumesc

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.