• [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture) 5 0 5 1
Currently:  

Author Topic: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)  (Read 31316 times)

0 Members and 1 Guest are viewing this topic.

Offline Scarala

  • Jr. Member
  • **
  • Posts: 87
    • View Profile
    • www.MPS-Fotos.de - Die MPS-Fotocommunity
[MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« on: November 15, 2012, 12:52:52 PM »
//--------------- 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>&nbsp;&nbsp;
                              <
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>&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;
                              <
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>&nbsp;&nbsp;&nbsp;</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
« Last Edit: November 16, 2012, 11:21:59 AM by Scarala »

Rembrandt

  • Guest
Re: [MOD] Vor und Zurück-Pfeile als Overlay auf den Bildern (Detailansicht)
« Reply #1 on: November 15, 2012, 06:14:45 PM »
Hi!

So wie es aussieht funktioniert es auf deiner Seite wunderbar, danke dafür.  :thumbup:

mfg Andi

Offline Scarala

  • Jr. Member
  • **
  • Posts: 87
    • View Profile
    • www.MPS-Fotos.de - Die MPS-Fotocommunity
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #2 on: December 09, 2012, 06:39:13 PM »
55 mal runtergeladen und nur 5 thanks... ganz schön dürftg xD

Rembrandt

  • Guest
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #3 on: December 10, 2012, 04:37:25 AM »
55 mal runtergeladen und nur 5 thanks... ganz schön dürftg xD
sind ~10% ist hier ganz normal....   :cry:

Offline Loda

  • Sr. Member
  • ****
  • Posts: 353
    • View Profile
    • Fotosucht Schweiz
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #4 on: December 10, 2012, 02:51:43 PM »
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.

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.282
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #5 on: December 10, 2012, 07:57:23 PM »
mein Danke zählt auch nur der Arbeit, nutze es leider auch nicht.

Danke Harald




Offline boss24

  • Newbie
  • *
  • Posts: 49
    • View Profile
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #6 on: December 11, 2012, 06:41:59 PM »
hi, picture Do you have a solution that did not work with this code using the reduction plug-in
sorry i speak english little, i using google translate..

http://www.4homepages.de/forum/index.php?topic=20886.0

Rembrandt

  • Guest
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #7 on: December 21, 2012, 05:41:36 AM »
Hi!
hi, picture Do you have a solution that did not work with this code using the reduction plug-in
...
test:
search in step 3.):
Code: [Select]
width:{width}px;height:{height}px;
and replace:
Code: [Select]
{limit_var}:{new_limit}px;

mfg Andi

Offline malwin23

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #8 on: December 23, 2012, 03:30:09 PM »
This mod is not working good with:

[MOD] Google Friendly Urls For 4images Best Seo Mod

http://www.4homepages.de/forum/index.php?topic=17598.0

It is giving redirect to %C2%A0 www.yourwebsite.com/%C2%A0 :(

Below is .htaccess code:

RewriteEngine On 

#RewriteBase /
RewriteRule ^cat-(.*)-([0-9]+)\.htmcategories.php?cat_id=$2&%{QUERY_STRING}
RewriteRule ^cat\.htmcategories.php?%{QUERY_STRING}
#Mod_bmollet : Image name in URL
RewriteRule ^img-(.*)-([0-9]+)\.htmdetails.php?image_id=$2&%{QUERY_STRING}
RewriteRule ^img([0-9]+)\.search.htmdetails.php?image_id=$1&%{QUERY_STRING}
RewriteRule ^img([0-9]+)\.lightbox.htmdetails.php?image_id=$1&%{QUERY_STRING}

#Mod_bmollet : This is to make search function work  ( redirect links from search results )
RewriteRule ^search\.htmsearch.php?%{QUERY_STRING}
RewriteRule ^search\.([0-9]+)\.htmsearch.php?page=$1&%{QUERY_STRING}
RewriteRule ^lightbox\.htmlightbox.php?%{QUERY_STRING}
RewriteRule ^lightbox\.([0-9]+)\.htmlightbox.php?page=$1&%{QUERY_STRING}

Offline kubiczek

  • Full Member
  • ***
  • Posts: 211
    • View Profile
    • Gross Peterwitz
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #9 on: December 24, 2012, 01:05:36 PM »
Klasse sache,

ich bin auf der suche nach einer möglichkeit eines Auswahlmenüs für verschiedene Overlays in der Detailsansicht.

ich habe bei mir auf meiner Seite den Pin MOD instaliert.
http://www.grosspeterwitz.de/gp/details.php?image_id=6478

desweiteren bin ich schon seit einiger zeit dran einen ZOOM Mod auf meiner Seite zu Instalieren.
http://www.grosspeterwitz.de/4images/details.php?image_id=14
http://www.4homepages.de/forum/index.php?topic=29056.msg155686#msg155686

Leider bekomme ich es nicht hin ein Auswahlmenü für die Overlays zu erstellen.
http://www.grosspeterwitz.de/4images_puzzle/details.php?image_id=1

Siehst Du da eine einfach möglichkeit einer UMSCHALTUNG?


Offline Starblade

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #10 on: March 19, 2014, 11:05:13 PM »
Super coole Sache. Hat mir sehr geholfen. Vielen Dank :)


Wenn mir jetzt noch ein verraten könnte, wie man die kleinen Vorschaubilder, für das vorige und nächste Bild rein bekommt, wäre ich mehr als glücklich  :)

Rembrandt

  • Guest
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #11 on: March 20, 2014, 05:31:45 AM »
Hi!
....
Wenn mir jetzt noch ein verraten könnte, wie man die kleinen Vorschaubilder, für das vorige und nächste Bild rein bekommt, wäre ich mehr als glücklich  :)
Anstatt der Pfeile?

mfg Andi

Offline kaschperl

  • Pre-Newbie
  • Posts: 1
    • View Profile
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #12 on: February 15, 2015, 09:39:58 PM »
Danke für die Verbesserung! Daumenhoch

Offline chapu

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #13 on: September 14, 2016, 01:41:38 AM »
Sehr gutes Add on und funktioniert super!
Besten Dank!

Offline Tino23

  • Full Member
  • ***
  • Posts: 190
    • View Profile
    • LMJ - Motorsport
Re: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
« Reply #14 on: November 28, 2016, 07:36:00 PM »
Bei mir läuft nach der Änderrung in der details.html der MOD Media sites v1.11.1 nicht mehr. Es werden mir keine Videos mehr angezeigt.