4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started 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
-
Wooooh - this is good. 8O
I no skill for this, sorry ...
-
... looks very nice ... ;)
-
Yes but haw can we make something like this or an other image viever?
-
Ask KurtW for Ajax code ... ;)
-
What is Ajax and ho is KurtW ?
I am an amateur.
Please help
-
What is Ajax
http://en.wikipedia.org/wiki/Ajax_%28programming%29
and ho is KurtW ?
User on forum.
-
... 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) ...
-
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?
-
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
-
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
</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 ) 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:
* {
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
<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
<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:
<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)
-
@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. ;)
-
Ok for header.html file -
// Step 1
Find:
<!--
1 ) Reference to the file containing the javascript.
add before:
{if has_ajax_zoom_image}
Find:
.highslide-display-none {
display: none;
}
</style>
add after:
{endif has_ajax_zoom_image}
// Step 2
In includes/page_header.php file,
find:
"has_rss" => false,
add after:
"has_ajax_zoom_image" => false,
// Step 3
In includes/functions.php file,
find:
"thumbnail_file_name" => $image_row['image_thumb_file']
replace:
"thumbnail_file_name" => $image_row['image_thumb_file'],
"has_ajax_zoom_image" => true
Finish.
-
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:
<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