Author Topic: Image Details !  (Read 11448 times)

0 Members and 1 Guest are viewing this topic.

Offline hoho

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
Image Details !
« on: November 09, 2007, 12:44:00 AM »
Hy guys.

Have anybody an idea haw we can make the details page with the Highslide JS ??

http://vikjavev.no/highslide/#examples

Thanks

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: Image Details !
« Reply #1 on: November 09, 2007, 01:06:56 AM »
Wooooh - this is good.  8O

I no skill for this, sorry ...
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Image Details !
« Reply #2 on: November 09, 2007, 01:26:05 AM »
... looks very nice ... ;)
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 hoho

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
Re: Image Details !
« Reply #3 on: November 09, 2007, 01:31:13 AM »
Yes but haw can we make something like this or an other image viever?

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: Image Details !
« Reply #4 on: November 09, 2007, 01:33:23 AM »
Ask KurtW for Ajax code ... ;)
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline hoho

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
Re: Image Details !
« Reply #5 on: November 09, 2007, 01:37:26 AM »
What is Ajax and ho is KurtW ?

I am an amateur.

Please help

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: Image Details !
« Reply #6 on: November 09, 2007, 01:38:24 AM »
Quote
What is Ajax

http://en.wikipedia.org/wiki/Ajax_%28programming%29

Quote
and ho is KurtW ?

User on forum.
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Image Details !
« Reply #7 on: November 09, 2007, 01:49:45 AM »
... we have testet "lightbox 2" in 4images  ... http://www.huddletogether.com/projects/lightbox2/ ...
... try this ... http://www.4homepages.de/forum/index.php?topic=11115.0 ...
... and it looks like this ...
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 hoho

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
Re: Image Details !
« Reply #8 on: November 09, 2007, 03:19:19 AM »
The links are not helpfull.
I cant find haw i can aded the lightbox on my homepage .
Is there any step by step for 4images?


Offline KurtW

  • 4images Guru
  • *******
  • Posts: 2.778
    • View Profile
    • Malediven-Bilder ~~Dreams~~
Re: Image Details !
« Reply #9 on: November 09, 2007, 06:01:31 AM »
Hi hoho,

here a link for only in details:
http://www.4homepages.de/forum/index.php?topic=15819.0

and here one for categories, details and ...
http://www.4homepages.de/forum/index.php?topic=18291


Kurt

rinaldos

  • Guest
Re: Image Details !
« Reply #10 on: November 09, 2007, 09:15:30 AM »
Hi,

You have to change the following files:

/templates/default/header.html
/templates/default/detail.htm

new files
/js/highslide

Demo
http://rinaldos.homeip.net/img6085.htm

Step 1
Download the zip from here
http://vikjavev.no/highslide/#examples

Step 2
make a folder in your 4images root directory.
/js
copy the whole directory highslide to the directory
/js/highslide

Step 3
open your /templates/default/header.html

find
Code: [Select]
</script>
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />

insert above the code from (example-no-border.html)

Code: [Select]
<!--
    1 ) Reference to the file containing the javascript.
    This file must be located on your server.
-->
<script type="text/javascript" src="/js/highslide/highslide.js"></script>
<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">    
    hs.graphicsDir = '/js/highslide/graphics/';
</script>
<!--
    3) These CSS-styles are necessary for the script to work. You may also put
    them in an external CSS-file. See the webpage for documentation.
-->
<style type="text/css">
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
       border: 2px solid silver;
}
.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
 
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-loading {
    display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
    text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
</style>

i removed this from this from the code:

Code: [Select]
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}

it is also possible to put the css code  in your .css file and not into the header.html. It's your choice

Code: [Select]
<style type="text/css">
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
       border: 2px solid silver;
}
.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
 
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-loading {
    display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
    text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

if you want to add other shows, change the path to highslide.
from

<script type="text/javascript" src="highslide/highslide.js"></script>

to

<script type="text/javascript" src="/js/highslide/highslide.js"></script>

and

hs.graphicsDir = 'highslide/graphics/';

to

hs.graphicsDir = '/js/highslide/graphics/';

Step 4
open your /templates/default/details.html
replace {image} with

Code: [Select]
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>

If you want to see a larger image, then remove "height=120" and change the width="600"
in my example i have this one:

Code: [Select]
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS"
title="Click to enlarge" height="" width="600" /></a>

I think this is a good start to implement the other examples.....


Gruss
Ingo

P.S. This is my first try to explain how to insert other codes in the template, and take a look a the license (only free for non commercial site)
« Last Edit: December 16, 2009, 04:09:24 PM by rinaldos »

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: Image Details !
« Reply #11 on: November 09, 2007, 12:49:04 PM »
@rinaldos:

I no try this now but is look perfect. :)
[edit] - one thing - header.html file ... if integrate this ... you see this code in all page. IF and ENDIF tag is need if problem with other page. ;)
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: Image Details !
« Reply #12 on: November 09, 2007, 01:04:44 PM »
Ok for header.html file -

// Step 1

Find:

Quote
<!--
    1 ) Reference to the file containing the javascript.

add before:

Code: [Select]
{if has_ajax_zoom_image}

Find:

Quote
.highslide-display-none {
    display: none;
}
</style>

add after:

Code: [Select]
{endif has_ajax_zoom_image}

// Step 2

In includes/page_header.php file,

find:

Quote
"has_rss" => false,

add after:

Code: [Select]
"has_ajax_zoom_image" => false,

// Step 3

In includes/functions.php file,

find:

Quote
"thumbnail_file_name" => $image_row['image_thumb_file']

replace:

Code: [Select]
"thumbnail_file_name" => $image_row['image_thumb_file'],
"has_ajax_zoom_image" => true

Finish.
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

jojomart

  • Guest
Re: Image Details !
« Reply #13 on: January 11, 2008, 12:34:08 AM »
Would it be possible to use this with the thumbnails on the different categories pages?  So when they click on a category link and go to that category's page, each of the thumbnails would be able to increase in size if they click on them?

Where the category page calls {thumbnail} what would you put in this code:

Code: [Select]
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>

or does {media_src} work to call a thumbnail?

Thanks!

Joanne