4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
February 20, 2018, 02:42:17 PM

Login with username, password and session length
Search:     Advanced search
You're looking for some 4images templates and styles? Then visit this thread to show websites with 4images templates to download.
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]On Klick Prev / Next Images
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 » »» Print
Current Topic Rating: ***
Author Topic: [MOD]On Klick Prev / Next Images  (Read 83351 times)
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« on: February 14, 2009, 10:55:07 PM »

Hi!

Mit dieser Modifikation ist es möglich mit klick auf das Bild, vor und zurück zu Navigieren.

Demo:Demo

1.) suche in der funktions.php:
1
"width" => $width,
und fügt davor ein:
1
"navi" => ($width/2),

2.) ersetze in der templates/media/jpg.html:
1
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
mit diesem:
1
<img src="{media_src}" border="0" alt="{image_name}"{width_height} usemap="#navi" ><br>

3.) suche in der templates/detail.html:
1
{endif msg}
und fügt danach ein:
1
2
<div class="tooltip" id="tt1">{lang_prev_image}</div>
<div class="tooltip" id="tt2">{lang_next_image}</div>

4.) suche in der templates/detail.html:
und füge danach ein:
1
2
3
4
5
6
7
8
<map name="navi">
{if prev_image_name}
  <area shape="rect" coords="0,0,{navi},{height}"   href="{prev_image_url}" onmouseover="showNAVI('tt1')" onmouseout="hideNAVI()" alt="{prev_image_name}">
{endif prev_image_name}
{if next_image_name}
  <area shape="rect"  coords="{navi},0,{width},{height}"  href="{next_image_url}" onmouseover="showNAVI('tt2')" onmouseout="hideNAVI()" alt="{next_image_name}">
   {endif next_image_name}
</map>

5.) Damit bei überfahren des Bildes ein 'tooltip' erzeugt wird, muss noch dieses script in die 'templates/header.html'.
suche:
1
{if has_rss}
füge davor ein:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
<!--
navi = null;
 document.onmousemove = updateNAVI;
 function updateNAVI(e) {
  if (navi != null) {
    x = (document.all) ? window.event.x + navi.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + navi.offsetParent.scrollTop  : e.pageY;
    navi.style.left = (x - 40) + "px";
    navi.style.top   = (y - 20) + "px";
  }
}
 
function showNAVI(id) {
  navi = document.getElementById(id);
  navi.style.display = "block"
}
 
function hideNAVI() {
  navi.style.display = "none";
}
//-->
</script>

6.) suche in der templates/style.css :
1
/*--Images----------------------------------------------------*/
und fügt danach ein:
1
2
3
4
5
6
7
8
9
.tooltip {
  position: absolute;
  display: none;
  font-family: Georgia,Tahoma,Verdana,Arial,Helvetica,sans-serif;
  font-size: 11px;
  color: #00ff00;
  font-weight : bold;
/* background-color: #cccccc; */
}


Jetzt sollte es möglich sein in einen bereich von 150 pixel vom linken und 150 pixel vom rechten rand aus,
mit der Maus ein Bild vor und zurück zu Navigieren.

mfg Andi

« Last Edit: May 23, 2013, 05:20:54 AM by Rembrandt » 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)
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1276

Thank You
-Given: 151
-Receive: 47


View Profile WWW
« Reply #1 on: February 15, 2009, 10:27:15 AM »

TOP  Good
 na dann mal auf zum testen Smile

Danke

Logged

Danke Harald



Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1276

Thank You
-Given: 151
-Receive: 47


View Profile WWW
« Reply #2 on: February 15, 2009, 02:07:12 PM »

Klappt bis auf den Tooltipp bestens, nur der wird im Bild nicht angezeigt

auszug aus der detail.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div align="center">{if msg}<b>{msg}<br />
                        <br />
                      </b>{endif msg}
                      <div class="tooltip" id="1">vorheriges Bild</div>
                      <div class="tooltip" id="2">nächstes Bild</div>
                      </p>
                      </div>
                    <div align="center"> {image}
                    <map name="navi">
  <area shape="rect" coords="0,0,150,800 "
   {if prev_image_name}
     href="{prev_image_url}">
   {endif prev_image_name}
  <area shape="rect"  coords="{navi},0,800,600"
   {if next_image_name}
     href="{next_image_url}">
   {endif next_image_name}
</map>

                      {if admin_links}<br />

header.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{direction}">
<head>
<title> {site_name}  </title>
<meta http-equiv="content-type" content="text/html; charset={charset}" />
<meta name="keywords" content="{meta_image_keywords} " />
<link rel="stylesheet" href="{template_url}/style.css" />
<script language="javascript" type="text/javascript">
<!--

  var captcha_reload_count = 0;
var captcha_image_url = "{url_captcha_image}";
  function new_captcha_image() {
    if (captcha_image_url.indexOf('?') == -1) {
  document.getElementById('captcha_image').src= captcha_image_url+'?c='+captcha_reload_count;
} else {
  document.getElementById('captcha_image').src= captcha_image_url+'&c='+captcha_reload_count;
}

    document.getElementById('captcha_input').value="";
    document.getElementById('captcha_input').focus();
    captcha_reload_count++;
  }

function opendetailwindow() {
    window.open('','detailwindow','toolbar=no,scrollbars=yes,resizable=no,width=680,height=480');
  }

// -->
</script>
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
{endif has_rss}
</head>
<script>
<!--
navi = null;
 document.onmousemove = updateNAVI;
 function updateNAVI(e) {
  if (navi != null) {
    x = (document.all) ? window.event.x + navi.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + navi.offsetParent.scrollTop  : e.pageY;
    navi.style.left = (x + 1) + "px";
    navi.style.top   = (y - 20) + "px";
  }
}
 
function showNAVI(id) {
  navi = document.getElementById(id);
  navi.style.display = "block"
}
 
function hideNAVI() {
  navi.style.display = "none";
}
//-->
</script>

<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<table width="100%" border="0">

</table>
<br />


LG Harald


Logged

Danke Harald



birdynator
Pre-Newbie

Offline Offline

Posts: 3

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #3 on: February 15, 2009, 03:07:56 PM »

dankeschön,

habs mal getestet... also mitm firefox funktionierts einwandfrei, nur mitm IE is der link fürs nächste bild beim ersten bild der gallery auf der linken seite des bildes...
is aber nicht weiter schlimm.

das mit den tooltipps klappt auch noch nicht wirklich.

mfg
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« Reply #4 on: February 15, 2009, 04:13:27 PM »

Klappt bis auf den Tooltipp bestens, nur der wird im Bild nicht angezeigt

auszug aus der detail.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div align="center">{if msg}<b>{msg}<br />
                        <br />
                      </b>{endif msg}
                      <div class="tooltip" id="1">vorheriges Bild</div>
                      <div class="tooltip" id="2">nächstes Bild</div>
                      </p>
                      </div>
                    <div align="center"> {image}
                    <map name="navi">
  <area shape="rect" coords="0,0,150,800 "
   {if prev_image_name}
     href="{prev_image_url}" onmouseover="showNAVI('1')" onmouseout="hideNAVI()">
   {endif prev_image_name}
  <area shape="rect"  coords="{navi},0,800,600"
   {if next_image_name}
     href="{next_image_url}" onmouseover="showNAVI('2')" onmouseout="hideNAVI()">
   {endif next_image_name}
</map>

                      {if admin_links}<br />

du hast auch die beiden:
Quote  [Expand]
<div class="tooltip" id="1">vorheriges Bild</div>
                      <div class="tooltip" id="2">nächstes Bild</div>
inerhalb eines <div> tags
ausgehend von der original 'details.html' ist die:
Quote  [Expand]
{if msg}<b>{msg}<br />
                  <br />
                  </b>{endif msg}
in keinen <div> tag

versuchs mal so:
Quote  [Expand]
<div align="center">{if msg}<b>{msg}<br />
                        <br />
                      </b>{endif msg}
                      </p>
                      </div>
<div class="tooltip" id="1">vorheriges Bild</div>
<div class="tooltip" id="2">nächstes Bild</div>

EDIT: sorry, ich habe was unter punkt 4.) im eingangspost vergessen, jetzt klappts auch mit den tooltips!!

mfg Andi
« Last Edit: February 15, 2009, 04:29:57 PM by Rembrandt » 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)
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1276

Thank You
-Given: 151
-Receive: 47


View Profile WWW
« Reply #5 on: February 15, 2009, 06:02:55 PM »

TOP, jetzt klappt es auch zwischen den div  Wink

Danke

LG Harald
Logged

Danke Harald



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

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« Reply #6 on: February 15, 2009, 06:32:26 PM »

...
habs mal getestet... also mitm firefox funktionierts einwandfrei, nur mitm IE is der link fürs nächste bild beim ersten bild der gallery auf der linken seite des bildes...
is aber nicht weiter schlimm. ...
sorry, unter punkt 4.) details.html ,hatte ich noch einen fehler drinnen.
gehört natürlich so:
Quote  [Expand]
<map name="navi">
{if prev_image_name}
  <area shape="rect" coords="0,0,150,800 "
   href="{prev_image_url}" onmouseover="showNAVI('1')" onmouseout="hideNAVI()">
{endif prev_image_name}
{if next_image_name}
  <area shape="rect"  coords="{navi},0,800,600"
   href="{next_image_url}" onmouseover="showNAVI('2')" onmouseout="hideNAVI()">
   {endif next_image_name}
</map>
ich habe es im eingangs post auch nochmal geändert.

ich sollte so spät am abend keine mod mehr einstellen Smile

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)
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« Reply #7 on: September 24, 2009, 11:36:53 AM »

@ Andi

... und warum steht diese tolle und so gut präsentierte Modifikation noch im Thread "... Request ..." ... ?
... das ist jetzt auch dein Part, das zu ändern ... Wink
Logged

Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« Reply #8 on: September 24, 2009, 11:47:21 AM »

Hi!
...... und warum steht diese tolle und so gut präsentierte Modifikation noch im Thread "... Request ..." ... ?
... das ist jetzt auch dein Part, das zu ändern ... Wink
naja ich wollte mich da nicht selbst beweihräuchern Smile
ausserdem dürfte diese modifikation den damaligen Mods entgangen sein.  Mr. Green

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)
ivan
4images Moderator
4images Guru
*****
Offline Offline

Posts: 2279

Thank You
-Given: 4
-Receive: 30


View Profile WWW
« Reply #9 on: September 24, 2009, 04:31:41 PM »

Hallo Andi,
ich habe die Demo mal ausprobiert.

Ich hatte echt Mühe, den Tooltip zu finden ... nur durch herumfahren mit der Maus
bin ich dann zum Ergebnis gekommen.

-bessere Lösung wäre mit einem Button im Bild
-die Sprachen wurden in Deinem Mod nicht berücksichtigt

Gruss Ivan
Logged

greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« Reply #10 on: September 24, 2009, 04:59:27 PM »

Hi!
....
Ich hatte echt Mühe, den Tooltip zu finden ... nur durch herumfahren mit der Maus
bin ich dann zum Ergebnis gekommen....

ich hatte ursprünglich den mod nur für bildgrößen im format 800x600 optimiert, jetzt sollte er für alle formate passen.

punkt 3.) und 4.) im eingangspost editiert.

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)
ivan
4images Moderator
4images Guru
*****
Offline Offline

Posts: 2279

Thank You
-Given: 4
-Receive: 30


View Profile WWW
« Reply #11 on: September 24, 2009, 09:22:36 PM »

Okay Andi,

Danke Wink
Logged

greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery
Gexor
Pre-Newbie

Offline Offline

Posts: 2

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #12 on: July 29, 2010, 11:53:48 AM »

Ist zwar schon älter dieser Thread aber..

um das ganze noch etwas schöner zu gestalten

suche

1
2
<div class="tooltip" id="tt1">{lang_prev_image}</div>
<div class="tooltip" id="tt2">{lang_next_image}</div>

ersetzte mit

1
2
<div class="tooltip" id="tt1"><img src="pfeil_links.gif"></img></div>
<div class="tooltip" id="tt2"><img src="pfeil_rechts.gif"></img></div>

und lade die gifs in dein hauptverzeichniss






* Pictures.rar (0.71 KB - downloaded 42 times.)
« Last Edit: July 29, 2010, 09:47:33 PM by Gexor » Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« Reply #13 on: July 29, 2010, 01:35:36 PM »

Willkommen im Form!

das, oder man läßt gleich das vorige b.z.w. nächste bild anzeigen:
1
2
<div id="tool1" class="tooltip2"><img src="{prev_thumb_file}" alt="prev_image_name"></div>
<div id="tool2" class="tooltip2"><img src="{next_thumb_file}" alt="next_image_name"></div>

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)
digital24
Pre-Newbie

Offline Offline

Posts: 7

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #14 on: February 26, 2011, 02:33:44 AM »

Hallo ..

Ich habe gestern Abend dieses MOD eingebaut, es funkioniert auch richtig gut. Gewählt habe ich die normale Version, also ohne Pfeile und ohne Bilder die links und rechts angezeigt werden.

Allerdings hat sich der Rahmen um das Bild (Detail) blau gefärbt. Ich kann mir vorstellen das dieser die Standardfarbe des eines Links angenommen hat.

Nachdem ich nun die halbe Nacht gesessen habe und versucht habe das wieder zurückzudrehen möchte ich mich nun doch an die Profis hier wenden.

Das Template, das ich ausgesucht habe ist das 4dark. installiert ist die neue Version 1.7.9.

Den Code habe ich ein paar mal verglichen, ich denke zumindest das ich hierbei nichts falsch gemacht habe.

Wo und vor allem wie müsste ich was eintragen damit der blaue Rahmen wieder weiß wird ?

Ich habe zwar viel und lange darüber gelesen und ausprobiert, aber als totaler Neuling ... na ja... ich habe es jedenfalls nicht auf die Reihen bekommen.  Embarassed

Kann mir dabei  jemand helfen ?

Gruß..
Wolfgang





Logged
Pages: [1] 2 3 4 5 » »» Print 
« previous next »
Jump to:  

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