Author Topic: [MOD]On Klick Prev / Next Images (Read 126027 times)

Rembrandt · « **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:

"width" => $width,

und fügt davor ein:

"navi" => ($width/2),

2.) ersetze in der templates/media/jpg.html:

Code: [Select]

<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />mit diesem:

Code: [Select]

<img src="{media_src}" border="0" alt="{image_name}"{width_height} usemap="#navi" ><br>

3.) suche in der templates/detail.html:

Code: [Select]

{endif msg}und fügt danach ein:

Code: [Select]

<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:

Code: [Select]

{image}

und füge danach ein:

Code: [Select]

<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:

Code: [Select]

{if has_rss}füge davor ein:

Code: [Select]

<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 :

Code: [Select]

/*--Images----------------------------------------------------*/und fügt danach ein:

Code: [Select]

.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

Jan-Lukas · « **Reply #1 on:** February 15, 2009, 10:27:15 AM »

TOP

na dann mal auf zum testen

Danke

Jan-Lukas · « **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

Code: [Select]

 <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

Code: [Select]

<!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

birdynator · « **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

Rembrandt · « **Reply #4 on:** February 15, 2009, 04:13:27 PM »

Quote from: Jan-Lukas 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

Code: [Select]
<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

<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

{if msg}<b>{msg}<br />
<br />
</b>{endif msg}

in keinen <div> tag

versuchs mal so:

Quote

<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

Jan-Lukas · « **Reply #5 on:** February 15, 2009, 06:02:55 PM »

TOP, jetzt klappt es auch zwischen den div

Danke

LG Harald

Rembrandt · « **Reply #6 on:** February 15, 2009, 06:32:26 PM »

Quote from: birdynator on February 15, 2009, 03:07:56 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

<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

mfg Andi

mawenzi · « **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 ...

Rembrandt · « **Reply #8 on:** September 24, 2009, 11:47:21 AM »

Hi!

Quote from: mawenzi on September 24, 2009, 11:36:53 AM

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

naja ich wollte mich da nicht selbst beweihräuchern

ausserdem dürfte diese modifikation den damaligen Mods entgangen sein.

mfg Andi

Rembrandt · « **Reply #9 on:** September 24, 2009, 04:59:27 PM »

Hi!

Quote from: ivan on September 24, 2009, 04:31:41 PM

....
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

Gexor · « **Reply #10 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

Code: [Select]

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

ersetzte mit

Code: [Select]

<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

Rembrandt · « **Reply #11 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:

Code: [Select]

<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

digital24 · « **Reply #12 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.

Kann mir dabei jemand helfen ?

Gruß..
Wolfgang

Rembrandt · « **Reply #13 on:** February 26, 2011, 12:38:45 PM »

Quote from: digital24 on February 26, 2011, 02:33:44 AM

...
Allerdings hat sich der Rahmen um das Bild (Detail) blau gefärbt. ....

ersetze in der jpg.html border="1" mit border="0"

mfg Andi

digital24 · « **Reply #14 on:** February 28, 2011, 12:29:58 AM »

HI Andy..

Vielen Dank für die schnelle Antwort und den Hinweis wegen des blauen Rahmens. Das hat funktioniert, der blaue Rahmen war weg.
dann habe ich noch ein wenig exprimentiert um den Rahmen dennoch wieder in einer weißen Farbe darzustellen.

Dazu habe ich in der jpg.html folgendes hinzugefügt.
Wer das mal gebrauchen kann:

Code: [Select]

<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} usemap="#navi" style="border-width: 1px; border-color: #FFFFFF"/><br>

Ob man das noch anders schreiben könnte, weiß ich auch nicht, aber es geht auf alle Fälle.

Wenn ich wieder in Wien bin.. (jeden Momat mind. ein mal) würde ich Dich gerne mal auf einen Drink einladen, für die viele Arbeit, die Du Dir hier machst und den tollen Service den Du hier ablieferst..

Wäre das ok ?

Grüße... Wolfgang

4images Forum & Community

News:

Author Topic: [MOD]On Klick Prev / Next Images (Read 126027 times)

Rembrandt

[MOD]On Klick Prev / Next Images

Jan-Lukas

Re: [MOD]On Klick Prev / Next Images

Jan-Lukas

Re: [MOD]On Klick Prev / Next Images

birdynator

Re: [MOD]On Klick Prev / Next Images

Rembrandt

Re: [MOD]On Klick Prev / Next Images

Jan-Lukas

Re: [MOD]On Klick Prev / Next Images

Rembrandt

Re: [MOD]On Klick Prev / Next Images

mawenzi

Re: [MOD]On Klick Prev / Next Images

Rembrandt

Re: [MOD]On Klick Prev / Next Images

Rembrandt

Re: [MOD]On Klick Prev / Next Images

Gexor

Re: [MOD]On Klick Prev / Next Images

Rembrandt

Re: [MOD]On Klick Prev / Next Images

digital24

Re: [MOD]On Klick Prev / Next Images - Rahmenfarbe - Detailbild

Rembrandt

Re: [MOD]On Klick Prev / Next Images - Rahmenfarbe - Detailbild

digital24

Re: [MOD]On Klick Prev / Next Images