4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)
[MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
Scarala:
//--------------- Deutsch ----------------
Hallo leute,
hier mal ein kleiner Mod von mir, das als Overlay über dem Bild in der Detailansicht einen vor- und zurück-Pfeil wie bei Facebook anzeigt.
Die Pfeile werden nur angezeigt, wenn die Maus über dem Bild ist.
Step1:
Öffne die Datei templates/(DeinTemplate)/header.html
füge dort zwischen <head> und </head> folgenden Code ein:
<script type="text/javascript">
<!--
function show_pic(picID){
var myObj = document.getElementById(picID);
if(myObj.style.display == "none"){
myObj.style.display = "block";
}else{
myObj.style.display = "none";
}
}
//-->
</script>
Step 2:
Lade dir die vier Bilder aus dem Anhang runter und lade sie in templates/(DeinTemplate)/images hoch.
Step 3:
Suche in templates/(DeinTemplate)/details.html nach:
{image}
und ersetze es durch
<div style="background-image: url({media_src}); width:{width}px;height:{height}px;" id="{image_name}" onmouseover="show_pic('prev_image_arrow'), show_pic('next_image_arrow')" onmouseout="show_pic('prev_image_arrow'), show_pic('next_image_arrow')">
<table style="width:{width}px;height:{height}px;">
<tr>
<td width="29px" style="vertical-align: middle;" align="left">
<a id="prev_image_arrow" href="{prev_image_url}" style="display:none; text-decoration:none;">{if prev_image_name}<img src="{template_url}/images/backtransp.png" onmouseover="this.src='{template_url}/images/back.png';" onmouseout="this.src='{template_url}/images/backtransp.png';" border="0" alt="{prev_image_name}" title="{prev_image_name}"/>{endif prev_image_name}</a>
</td>
<td>
</td>
<td width="29px" style="vertical-align:middle;" align="right">
<a id="next_image_arrow" href="{next_image_url}" style="display:none; text-decoration:none;">{if next_image_name}<img src="{template_url}/images/nexttransp.png" onmouseover="this.src='{template_url}/images/next.png';" onmouseout="this.src='{template_url}/images/nexttransp.png';"border="0" alt="{next_image_name}" title="{next_image_name}"/>{endif next_image_name}</a>
</td>
</tr>
</table>
</div>
Step 4: (optional)
Ebenfalls in templates/(DeinTemplate)/details.html kann man nun noch folgenden Code löschen:
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr valign="top">
<td class="row2"> {if prev_image_name}<table><tr><td><center>{lang_prev_image}<br>
<b><a href="{prev_image_url}">{prev_image_name}</a></b>
<br><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="1"></a></center></td></tr></table>
{endif prev_image_name}</td>
<td align="right" class="row2">{if next_image_name}<table><tr><td><center>{lang_next_image}<br>
<b><a href="{next_image_url}">{next_image_name}</a> </b>
<br><a href="{next_image_url}"><img src="{next_thumb_file}" border="1"></a></center></td></tr></table>
{endif next_image_name}</td>
</tr>
</table>
</td>
</tr>
</table>
um die Zurück- und Weiter-Tabelle unterhalb des Bildes von der Details-Seite zu entfernen.
Natürlich kann man die beiden Bilddateien durch beliebige eigene ersetzen (Dann nur dran denken die Spaltenbreite hochzusetzten auf die Breite eures Bildes).
Auf meiner Seite hab ich diese Mod installiert, wer also ein Beispiel sehen will, einfach auf mein Signaturbanner klicken.
Liebe Grüße
Euer Scarala
EDIT1: Step 3: geändert wegen falscher Darstellung bei 1. und letztem Bild einer Kategorie, funktioniert jetzt richtig.
EDIT2: Step 3: Darstelung auch für den IE angepasst
EDIT3: Step 3: Die Pfeile werden nun halbtransparent dargestellt und bei Mouseover auf einem Pfeil erst voll sichtbar.
EDIT4: Step 3: Bei mouseover der Pfeile werden nun die Namen des nächsten bzw vorherigen Bildes als Tooltip angezeigt
Step 4 hinzugefügt
//------------------ English --------------------
Hello guys,
here is a little MOD from me, that shows a next- and back-arrow as overlay on the Picture in the detail-view.
The arrows will only be shown on mouseover the picture.
Step1:
open the file templates/(yourtemplate)/header.html
insert between <head> and </head> following code:
<script type="text/javascript">
<!--
function show_pic(picID){
var myObj = document.getElementById(picID);
if(myObj.style.display == "none"){
myObj.style.display = "block";
}else{
myObj.style.display = "none";
}
}
//-->
</script>
Step 2:
Download the four images from attachment and upload them in templates/(yourtemplate)/images.
Step 3:
search in templates/(yourtemplate)/details.html for:
{image}
and replace with
<div style="background-image: url({media_src}); width:{width}px;height:{height}px;" id="{image_name}" onmouseover="show_pic('prev_image_arrow'), show_pic('next_image_arrow')" onmouseout="show_pic('prev_image_arrow'), show_pic('next_image_arrow')">
<table style="width:{width}px;height:{height}px;">
<tr>
<td width="29px" style="vertical-align: middle;" align="left">
<a id="prev_image_arrow" href="{prev_image_url}" style="display:none; text-decoration:none;">{if prev_image_name}<img src="{template_url}/images/backtransp.png" onmouseover="this.src='{template_url}/images/back.png';" onmouseout="this.src='{template_url}/images/backtransp.png';" border="0" alt="{prev_image_name}" title="{prev_image_name}"/>{endif prev_image_name}</a>
</td>
<td>
</td>
<td width="29px" style="vertical-align:middle;" align="right">
<a id="next_image_arrow" href="{next_image_url}" style="display:none; text-decoration:none;">{if next_image_name}<img src="{template_url}/images/nexttransp.png" onmouseover="this.src='{template_url}/images/next.png';" onmouseout="this.src='{template_url}/images/nexttransp.png';"border="0" alt="{next_image_name}" title="{next_image_name}"/>{endif next_image_name}</a>
</td>
</tr>
</table>
</div>
Step 4: (optional)
also in templates/(yourtemplate)/details.html you can now delete following code:
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr valign="top">
<td class="row2"> {if prev_image_name}<table><tr><td><center>{lang_prev_image}<br>
<b><a href="{prev_image_url}">{prev_image_name}</a></b>
<br><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="1"></a></center></td></tr></table>
{endif prev_image_name}</td>
<td align="right" class="row2">{if next_image_name}<table><tr><td><center>{lang_next_image}<br>
<b><a href="{next_image_url}">{next_image_name}</a> </b>
<br><a href="{next_image_url}"><img src="{next_thumb_file}" border="1"></a></center></td></tr></table>
{endif next_image_name}</td>
</tr>
</table>
</td>
</tr>
</table>
to delete the next- back-table below the picture on the details-page.
You can replace the pictures of the arrows with your own style. (then you have to edit the column-width and insert the width of your arrow-images).
I´ve installed this mod on my page, so if you want to see an example, you only have to click on my signature-banner.
Greetings
Your Scarala
PS: I hope my translation is ok an readable...
EDIT1: Step 3: edited cause of wrong visibility on first and last picture of a category, now it works.
EDIT2: Step 3: edited for correct showing in Internet Explorer
EDIT3: Step 3: the arrows are now shown half-transparent and will only be shown full on mouseover an arrow
EDIT4: Step 3: now on mouseover an arrow, there is shown the name of the next/previous image in a tooltip
Step 4 added
Rembrandt:
Hi!
So wie es aussieht funktioniert es auf deiner Seite wunderbar, danke dafür. :thumbup:
mfg Andi
Scarala:
55 mal runtergeladen und nur 5 thanks... ganz schön dürftg xD
Rembrandt:
--- Quote from: Scarala on December 09, 2012, 06:39:13 PM ---55 mal runtergeladen und nur 5 thanks... ganz schön dürftg xD
--- End quote ---
sind ~10% ist hier ganz normal.... :cry:
Loda:
ich habe dir auch ein dankeschön gegeben. kann es leider nicht verwenden, da ich
[MOD] Highslide ALL IN ONE benutze. trotzdem dankeschön für deine mühe, die idee und veröffentlichung.
Navigation
[0] Message Index
[#] Next page
Go to full version