[MOD] Photo-Zoom FB Style

[netkingZ]

Nome MOD:
Photo-Zoom FB Style

Tipologia Codice:
JavaScript+HTML

Descrizione:
MOD per aggiungere la possibilità di zoom immediatamente all'immagine dell'Avatar come utilizzato su FaceBook

Salve mi sono dilettato nel modificare alcune parti del codice sorgente per creare l'effetto sopra descritto . Per il momento il codice che vi fornisco l'ho testato solo in locale e solo con la Skin "Baisik" , ma vi invito a riportarmi qui di seguito le vostre impressioni e suggerimenti. Grazie.

Procedura:
ACP-->Aspetto-->Template-->sidebar_user_info

In sidebar_user_info subito all'inizio :

<script type="text/JavaScript">
function UpAvatar()
{
  document.getElementById('bigAvatar').style.display ="block";
}
 
function DownAvatar()
{
  document.getElementById('bigAvatar').style.display ="none";
}
</script>

Modificare :

<xen:avatar user="$user" size="m" />

con :

<xen:avatar user="$user" size="m" onMouseOver="UpAvatar()" onmouseout="DownAvatar()"/>
                        <div style="background-color:#fff; border:1px solid #999;  height:200px ; width:200px ; margin-top:-150px; margin-left:-150px; border-radius:5px; display:none" id="bigAvatar"  >
                          <div style="border:1px solid #999;  height:192px ; width:192px ; margin-top:3px; margin-left:3px"  >
                      <img src="../data/avatars/l/0/{$user.user_id}.jpg" height="192px" width="192px">
                          </div>
                  </div> <!--// Immagine //-->

Il codice è molto semplice , ma spero risulti utile a chi come me ne aveva bisogno.

Screen:

Funzionamento:

Quando il mouse passa sull'Avatar esce la scritta lo Zoom dell'Avatar , quando ne esce scompare .

 

[Kintaro]

Funzionamento:

Quando il mouse passa sull'Avatar esce la scritta lo Zoom dell'Avatar , quando ne esce scompare .

scusa non ho mica capito, esca la scritta "lo Zoom dell'Avatar"?

 

[netkingZ]

Quando entri nell'immagine quest'ultima si ingrandisce, se hai abilitata la funzione ZoomPhoto su FB comprendi quello che ho cercato di fare... anche se è solo una prova.

 

[SideSilent]

Ok io non ho sidebar_user_info

ho solo

sidebar.css
sidebar_online_users
sidebar_share_page
sidebar_share_page.css
sidebar_visitor_panel

 

[Alex97]

Prova a vedere nell'host

 

[SideSilent]

non trovo nulla.... cmq su online_users ho il riferimento agli avatar

<xen:edithint template="sidebar.css" />
 
<!-- block: sidebar_online_staff -->
<xen:if hascontent="true">
    <div class="section staffOnline avatarList">
        <div class="secondaryContent">
            <h3>{xen:phrase staff_online_now}</h3>
            <ul>
                <xen:contentcheck>
                    <xen:foreach loop="$onlineUsers.records" value="$user">
                        <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
                            <li>
                                <xen:avatar user="$user" size="s" img="true" />
                                <xen:username user="$user" rich="true" />
                                <div class="userTitle">{xen:helper userTitle, $user}</div>
                            </li>
                        </xen:if>
                    </xen:foreach>
                </xen:contentcheck>
            </ul>
        </div>
    </div>
</xen:if>
<!-- end block: sidebar_online_staff -->
 
<!-- block: sidebar_online_users -->
<div class="section membersOnline userList">       
    <div class="secondaryContent">
        <h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3>
       
        <xen:if is="{$onlineUsers.records}">
       
            <xen:if is="{$visitor.user_id}">
                <xen:if hascontent="true">
                <h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>
                <ul class="followedOnline">
                    <xen:contentcheck>
                        <xen:foreach loop="$onlineUsers.records" value="$user">
                            <xen:if is="{$user.followed}">
                                <li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
                <h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>
                </xen:if>
            </xen:if>
           
            <ol class="listInline">
                <xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
                    <xen:if is="{$i} <= {$onlineUsers.limit}">
                        <li>
                        <xen:if is="{$user.user_id}">
                            <a href="{xen:link members, $user}"
                                class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                        <xen:else />
                            {xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                        </xen:if>
                        </li>
                    </xen:if>
                </xen:foreach>
                <xen:if is="{$onlineUsers.recordsUnseen}">
                    <li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>
                </xen:if>
            </ol>
        </xen:if>
       
        <div class="footnote">
            {xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}
        </div>
    </div>
</div>
<!-- end block: sidebar_online_users -->

 

[Alex97]

Hai la licenza originale?

 

[SideSilent]

si ma sto in locale in attesa che mi arrivi il server

 

[Alex97]

Forse è per questo. Aspetta il server installa e dicci qui se non trovi ancora il file.

 

[SideSilent]

ok