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

0 Members and 1 Guest are viewing this topic.

Rembrandt

  • Guest
[MOD]On Klick Prev / Next Images
« 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

« Last Edit: May 23, 2013, 05:20:54 AM by Rembrandt »

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.284
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD]On Klick Prev / Next Images
« Reply #1 on: February 15, 2009, 10:27:15 AM »
TOP  :thumbup:
 na dann mal auf zum testen :)

Danke

Danke Harald




Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.284
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD]On Klick Prev / Next Images
« 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


Danke Harald




Offline birdynator

  • Pre-Newbie
  • Posts: 3
    • View Profile
Re: [MOD]On Klick Prev / Next Images
« 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

  • Guest
Re: [MOD]On Klick Prev / Next Images
« 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

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
« Last Edit: February 15, 2009, 04:29:57 PM by Rembrandt »

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.284
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD]On Klick Prev / Next Images
« Reply #5 on: February 15, 2009, 06:02:55 PM »
TOP, jetzt klappt es auch zwischen den div  :wink:

Danke

LG Harald
Danke Harald




Rembrandt

  • Guest
Re: [MOD]On Klick Prev / Next Images
« 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
<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

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD]On Klick Prev / Next Images
« 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 ... ;)
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

  • Guest
Re: [MOD]On Klick Prev / Next Images
« 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 ... ;)
naja ich wollte mich da nicht selbst beweihräuchern :)
ausserdem dürfte diese modifikation den damaligen Mods entgangen sein.  :mrgreen:

mfg Andi

Offline ivan

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 2.279
    • View Profile
    • Bilder Gallery
Re: [MOD]On Klick Prev / Next Images
« 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
greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery

Rembrandt

  • Guest
Re: [MOD]On Klick Prev / Next Images
« 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

Offline ivan

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 2.279
    • View Profile
    • Bilder Gallery
Re: [MOD]On Klick Prev / Next Images
« Reply #11 on: September 24, 2009, 09:22:36 PM »
Okay Andi,

Danke ;)
greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery

Offline Gexor

  • Pre-Newbie
  • Posts: 2
    • View Profile
Re: [MOD]On Klick Prev / Next Images
« 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

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





« Last Edit: July 29, 2010, 09:47:33 PM by Gexor »

Rembrandt

  • Guest
Re: [MOD]On Klick Prev / Next Images
« 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:
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

Offline digital24

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD]On Klick Prev / Next Images - Rahmenfarbe - Detailbild
« 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.  :oops:

Kann mir dabei  jemand helfen ?

Gruß..
Wolfgang