4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
October 26, 2014, 06:09:23 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Current Topic Rating: *****
Author Topic: [MOD] Pfeile als Overlay auf Bild (arrows as overlay on picture)  (Read 7962 times)
Scarala
Jr. Member
**
Offline Offline

Posts: 68

Thank You
-Given: 5
-Receive: 17


View Profile WWW
« 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:
1
2
3
4
5
6
7
8
9
10
11
12
<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:
1
{image}

und ersetze es durch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	
	
<
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:
1
2
3
4
5
6
7
8
9
10
11
12
<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:
1
{image}

and replace with

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	
	
<
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

* back.png (0.61 KB - downloaded 248 times.)
* next.png (0.61 KB - downloaded 238 times.)
* nexttransp.png (0.56 KB - downloaded 217 times.)
* backtransp.png (0.57 KB - downloaded 217 times.)
« Last Edit: November 16, 2012, 11:21:59 AM by Scarala » Logged

Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4085

Thank You
-Given: 107
-Receive: 859

Vienna


View Profile WWW
« Reply #1 on: November 15, 2012, 06:14:45 PM »

Hi!

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

mfg Andi
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Scarala
Jr. Member
**
Offline Offline

Posts: 68

Thank You
-Given: 5
-Receive: 17


View Profile WWW
« Reply #2 on: December 09, 2012, 06:39:13 PM »

55 mal runtergeladen und nur 5 thanks... ganz schön dürftg xD
Logged

Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4085

Thank You
-Given: 107
-Receive: 859

Vienna


View Profile WWW
« 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....   Crying or Very sad
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Loda
Sr. Member
****
Offline Offline

Posts: 351

Thank You
-Given: 31
-Receive: 7


View Profile WWW
« 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.
Logged
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1229

Thank You
-Given: 140
-Receive: 42


View Profile WWW
« Reply #5 on: December 10, 2012, 07:57:23 PM »

mein Danke zählt auch nur der Arbeit, nutze es leider auch nicht.

Logged

Danke Harald

boss24
Newbie
*
Offline Offline

Posts: 49

Thank You
-Given: 1
-Receive: 0


View Profile
« 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
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4085

Thank You
-Given: 107
-Receive: 859

Vienna


View Profile WWW
« 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.):
1
width:{width}px;height:{height}px;
and replace:
1
{limit_var}:{new_limit}px;

mfg Andi
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
malwin23
Newbie
*
Offline Offline

Posts: 10

Thank You
-Given: 1
-Receive: 0


View Profile
« 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 Sad

Below is .htaccess code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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}
Logged
kubiczek
Full Member
***
Offline Offline

Posts: 208

Thank You
-Given: 31
-Receive: 10


View Profile WWW
« 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?

Logged
Starblade
Newbie
*
Offline Offline

Posts: 10

Thank You
-Given: 4
-Receive: 0


View Profile
« Reply #10 on: March 19, 2014, 11:05:13 PM »

Super coole Sache. Hat mir sehr geholfen. Vielen Dank Smile


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  Smile
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4085

Thank You
-Given: 107
-Receive: 859

Vienna


View Profile WWW
« 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  Smile
Anstatt der Pfeile?

mfg Andi
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.105 seconds with 21 queries.
Post your comments here