4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: hoho on November 09, 2007, 12:44:00 AM



Title: Image Details !
Post by: hoho 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 (http://vikjavev.no/highslide/#examples)

Thanks


Title: Re: Image Details !
Post by: thunderstrike on November 09, 2007, 01:06:56 AM
Wooooh - this is good.  8O

I no skill for this, sorry ...


Title: Re: Image Details !
Post by: mawenzi on November 09, 2007, 01:26:05 AM
... looks very nice ... ;)


Title: Re: Image Details !
Post by: hoho on November 09, 2007, 01:31:13 AM
Yes but haw can we make something like this or an other image viever?


Title: Re: Image Details !
Post by: thunderstrike on November 09, 2007, 01:33:23 AM
Ask KurtW for Ajax code ... ;)


Title: Re: Image Details !
Post by: hoho on November 09, 2007, 01:37:26 AM
What is Ajax and ho is KurtW ?

I am an amateur.

Please help


Title: Re: Image Details !
Post by: thunderstrike on November 09, 2007, 01:38:24 AM
Quote  [Expand]
What is Ajax

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

Quote  [Expand]
and ho is KurtW ?

User on forum.


Title: Re: Image Details !
Post by: mawenzi 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 (http://klick.kl.funpic.de/photoblog.php) ...


Title: Re: Image Details !
Post by: hoho 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?



Title: Re: Image Details !
Post by: KurtW 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 (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 (http://www.4homepages.de/forum/index.php?topic=18291)


Kurt


Title: Re: Image Details !
Post by: rinaldos 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 (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
1
2
3
</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)

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!--
    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:

1
2
3
4
* {
    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

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

1
2
3
<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:

1
2
3
<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)


Title: Re: Image Details !
Post by: thunderstrike 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. ;)


Title: Re: Image Details !
Post by: thunderstrike on November 09, 2007, 01:04:44 PM
Ok for header.html file -

// Step 1

Find:

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

add before:

1
{if has_ajax_zoom_image}

Find:

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

add after:

1
{endif has_ajax_zoom_image}

// Step 2

In includes/page_header.php file,

find:

Quote  [Expand]
"has_rss" => false,

add after:

1
"has_ajax_zoom_image" => false,

// Step 3

In includes/functions.php file,

find:

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

replace:

1
2
"thumbnail_file_name" => $image_row['image_thumb_file'],
"has_ajax_zoom_image" => true

Finish.


Title: Re: Image Details !
Post by: jojomart 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:

1
2
3
<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