Author Topic: JavaScript + CSS = Nice Picture Display  (Read 82648 times)

0 Members and 1 Guest are viewing this topic.

Offline max.cady

  • Jr. Member
  • **
  • Posts: 67
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #15 on: September 12, 2006, 06:57:19 PM »
ok, thanks ... can you tell me where I can find such a link in 4images? I couldn't find it in any html file so it is in any php file I suppose?
Could anybody tell me in which file I can find the relevant link where to put the lightbox reference to? Or is this insider knowledge only?  :?

Offline max.cady

  • Jr. Member
  • **
  • Posts: 67
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #16 on: September 12, 2006, 07:56:17 PM »
Inspired by this thread
http://www.4homepages.de/forum/index.php?topic=9885.msg47995#msg47995

I got it to work on the details page by wrapping the {image} in the following tags
<a href="{media_src}" target="_blank" rel="lightbox">{image}</a>

However, I want it on the categories view that the lightbox opens if clicking on the thumbnail.
I tried the same trick with thumbnail_bit.html by wrapping the thumbnail in a href-tags and the rel="lightbox" tags but it won't work.

Any ideas how to get it work on the categories page?

Offline Daniela007

  • Newbie
  • *
  • Posts: 33
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #17 on: November 14, 2006, 12:56:01 AM »
Dieses Script schaut voll super aus.

Nur leider habe ich überhaubt keine Ahnung wie man sowas in die Galerie einbaut.

Hat wer ein Einbauhilfe in Deutsch? :D

Lg
Daniela

Offline Maweryk

  • Sr. Member
  • ****
  • Posts: 253
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #18 on: March 01, 2007, 08:04:54 PM »
Inspired by this thread
http://www.4homepages.de/forum/index.php?topic=9885.msg47995#msg47995

I got it to work on the details page by wrapping the {image} in the following tags
<a href="{media_src}" target="_blank" rel="lightbox">{image}</a>

However, I want it on the categories view that the lightbox opens if clicking on the thumbnail.
I tried the same trick with thumbnail_bit.html by wrapping the thumbnail in a href-tags and the rel="lightbox" tags but it won't work.

Any ideas how to get it work on the categories page?

Hat es einer bereits geschafft, die Lightbox in die categories.php einzubauen?
Wäre doch toll, wenn das Foto sich direkt nach dem Klick auf das Thumbnail über die Seite legen würde.
Für User, die kein JS aktiviert haben, würde dann wie gehabt die andere Seite aufgerufen werden.

Danke & Gruß

Markus

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #19 on: March 01, 2007, 08:53:58 PM »
Hat es einer bereits geschafft, die Lightbox in die categories.php einzubauen?

... hatte da schon jemand nachgefragt ... :wink:
... da "media_src" in der functions.php definiert wird, kannst du den Link (s.o.) auch um {thumbnail} in der thumbnail_bit.html legen ...
... und so funktioniert die "lightbox" auch in der index.php, search.php, categories.php und überall dort, wo die thumbnail_bit.html verwendet wird ...
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) ...

Offline Maweryk

  • Sr. Member
  • ****
  • Posts: 253
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #20 on: March 01, 2007, 09:07:25 PM »
Dank Dir, aber es funktioniert leider nicht. :-(
Mein thumbnail_bit.html sieht nun so aus:
Code: [Select]
<a href="{media_src}" target="_blank" rel="lightbox">{thumbnail}</a>Im Quellcode tauchen dann natürlich beide hrefs auf und er nimmt den alten Link:
Code: [Select]
<a href="./data/media/104/002.jpg" target="_blank" rel="lightbox"><a href="./image-3450.htm"><img src="./data/thumbnails/104/002.jpg" border="1" width="89" height="67" alt="002" /></a></a>
Was habe ich übersehen?

Danke & Gruß

Markus


Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #21 on: March 01, 2007, 11:29:46 PM »
... dann probiere es zunächst nur mal mit einem einfachen Textlink in der thumbnail_bit.html aus ...
... das "thumbnail" in der functions.php müsste dann ohne Link definiert werden, um den Link wie oben zu verwenden ...
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) ...

Offline Maweryk

  • Sr. Member
  • ****
  • Posts: 253
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #22 on: March 02, 2007, 10:38:08 AM »
Vielen Dank für Deinen Hinweis.
Als Textlink klappt es natürlich.
Wenn ich aber den Link aus der functions.php rausschmeiße, dann kommen User ohne JS leider nicht mehr auf die Ursprungsseite.
Wie wäre es denn, wenn man den Link in der thumbnail_bit.html in JS einbettet?

Gruß

Markus

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #23 on: March 05, 2007, 03:56:57 PM »
Wie wäre es denn, wenn man den Link in der thumbnail_bit.html in JS einbettet?

... kann ich nicht ganz nachvollziehen ...  :?
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) ...

Offline KurtW

  • 4images Guru
  • *******
  • Posts: 2.778
    • View Profile
    • Malediven-Bilder ~~Dreams~~
Re: JavaScript + CSS = Nice Picture Display
« Reply #24 on: March 05, 2007, 04:08:49 PM »
Hallo,

Und:
Quote
Für User, die kein JS aktiviert haben, würde dann wie gehabt die andere Seite aufgerufen werden.
stimmt so auch nicht. Da dieses Script im Link vom Bild integriert ist, öffnet sich ohne Javascript direkt das Bild, nicht eine page.

Es gibt zwar mit diesem Effect auch ein Script, das auch html öffnet, funktionierte aber bei meine Tests vor ca: 1 Jahr nicht so recht.



cu
Kurt

Offline Maweryk

  • Sr. Member
  • ****
  • Posts: 253
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #25 on: April 03, 2007, 07:05:37 PM »
Schade. :(

Gruß

Markus

Offline Alessio

  • Jr. Member
  • **
  • Posts: 59
    • View Profile
    • Webax.it [Alessio's photogallery]
Re: JavaScript + CSS = Nice Picture Display
« Reply #26 on: April 09, 2007, 09:40:40 PM »
I implemented Lightbox 2 on my web site http://www.webax.it ; it works with the thumbnails of new images in the home page and with the thumbnails of categories.php, but not with random images, top images, etc.
Furthermore, sometimes clicking on the thumbnails of categories.php/new images the details.php page or just the image opens instead of the lightbox.
 
Can you help me?

UPDATE: resolved
« Last Edit: June 27, 2007, 08:10:14 AM by Alessio »
Alessio
my homepage: http://www.webax.it

Offline jrey

  • Full Member
  • ***
  • Posts: 165
    • View Profile
    • http://www.jrey.net
Re: JavaScript + CSS = Nice Picture Display
« Reply #27 on: April 10, 2007, 11:52:50 PM »
I think it would be nice display large image, instead of opening it in a new window :)

Anybody Knows ?

Offline Alessio

  • Jr. Member
  • **
  • Posts: 59
    • View Profile
    • Webax.it [Alessio's photogallery]
Re: JavaScript + CSS = Nice Picture Display
« Reply #28 on: June 30, 2007, 09:57:37 AM »
Inspired by this thread
http://www.4homepages.de/forum/index.php?topic=9885.msg47995#msg47995

I got it to work on the details page by wrapping the {image} in the following tags
<a href="{media_src}" target="_blank" rel="lightbox">{image}</a>

However, I want it on the categories view that the lightbox opens if clicking on the thumbnail.
I tried the same trick with thumbnail_bit.html by wrapping the thumbnail in a href-tags and the rel="lightbox" tags but it won't work.

Any ideas how to get it work on the categories page?


Open Functions.php and find

Code: [Select]
if ($show_link) {
    if ($open_window) {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";
    }
    else {
      $thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\">".$thumb."</a>";

Replace with

Code: [Select]
  if ($show_link) {
    if ($open_window) {
      $thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";
    }
    else {
      $thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";


Find
Code: [Select]
$file_src = get_file_path($thumb_file_name, "thumb", $cat_id, 0, 1);
add below
Code: [Select]
$media_src = get_file_path($media_file_name, "media", $cat_id, 0, 1);
« Last Edit: July 25, 2008, 12:56:24 AM by Alessio »
Alessio
my homepage: http://www.webax.it

Offline santadirk

  • Pre-Newbie
  • Posts: 6
    • View Profile
Re: JavaScript + CSS = Nice Picture Display
« Reply #29 on: June 11, 2008, 01:07:44 PM »
Hallo zusammen

kann einer noch einmal zusammenfassen in welchen Dateien man Änderungen durchführen muss?
Würde die Lightbox 2 gerne für meine Homepage nutzen aber irgendwie verstehe ich ausser Alessions letzten Beitrag ziemlich wenig

Danke