4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
December 09, 2016, 08:44:45 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Requests & Discussions) (Moderators: mawenzi, Rembrandt)
| | |-+  [MOD] Featured Image Zoomer / Bilder heranzoomen
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 » »» Print
Author Topic: [MOD] Featured Image Zoomer / Bilder heranzoomen  (Read 19113 times)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« on: July 14, 2010, 02:20:29 PM »

Demo: http://test.4images.benny-boehnke.info/details.php?image_id=1

Step 1
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/details.html
Search / Suche:
Add after / Danach einfügen:
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="imagezoom/featuredimagezoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

$('#image_id_<?php echo $image_id?>').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: '{media_src}'
})
})
</script>

Step 2
Open / Öffne: templates/STYLES/styles.css
Search the last / Suche die leztzte:
Add after / Füge danach ein:
1
2
3
4
5
6
7
.magnifyarea{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

Step 3
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/media/jpg.html
Search / Suche:
Replace with / Ersetze mit:
1
<img id="image_id_<?php echo $image_id?>"

Step 4
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/media/png.html
Search / Suche:
Replace with / Ersetze mit:
1
<img id="image_id_<?php echo $image_id?>"

Step 5
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/media/gif.html
Search / Suche:
Replace with / Ersetze mit:
1
<img id="image_id_<?php echo $image_id?>"

Step 6
Download the attachment => Unpack and put the "imagezoom" folder in your root folder
Downloade den Anhang => Entpacken und packe den "imagezoom" ordner in deinem Root Verzeichnis

* imagezoom.zip (6.13 KB - downloaded 50 times.)

Follow members gave a thank to your post:
uli480

For this post, 1 member gave a thank you!
« Last Edit: July 14, 2010, 05:07:25 PM by Sumale.nin » Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 894

Vienna


View Profile WWW
« Reply #1 on: July 14, 2010, 04:17:44 PM »

deine demo funktioniert im IE nicht, im FF schon. (attachment)
und den pfad  "/templates/STYLE/details.html" gibt es auch nicht.

deine erweiterte suche gibt eine fehlermeldung aus, aber das scheint ja ein anderer mod zu sein.

mfg Andi

* zoom.jpg (29.35 KB - downloaded 73 times.)
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #2 on: July 14, 2010, 05:10:09 PM »

Komisch!
Verstehe ich nicht ganz, warum das nicht geht....
Im originalen Zustand läuft es auch im IE: http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
Alle Pfade sind richtig. Kannst du dir was vorstellen?
« Last Edit: July 14, 2010, 05:21:31 PM by Sumale.nin » Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 894

Vienna


View Profile WWW
« Reply #3 on: July 14, 2010, 05:24:42 PM »

ich nehme mal an das es an den sicherheitseinstellungen vom IE liegt.
hier wird ein code von einer fremden domain geladen, und das lasse ich z.b. nicht zu, b.z.w. glaube ich sogar das es im IE als standard eingestellt ist.

das vermute ich mal.
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
installier das script mal auf deiner webseite.

mfg Andi

edit: schreibt das script mal in den header und nicht in den body
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #4 on: July 14, 2010, 05:58:57 PM »

Beide Varianten funktionieren nicht. Ich verstehe einfach nicht warum. Der IE zickt jedes mal herum. Solch ein Müll jedes mal.
Ich habe die JS auf meinem server nun und auch alles in den header geschrieben! es funktioniert aber nicht!
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 894

Vienna


View Profile WWW
« Reply #5 on: July 14, 2010, 06:01:36 PM »

wenn man alles richtig einbaut funktioniert es, schau mal auf meine demo seite.

die style.css mal aussen vor gelassen.....


einen neuen Order im Root mit den namen js/featuredimagezoomer/ anlegen, oder welchen ordner du auch immer verwenden möchtest.
die beiden dateien "jquery.min.js" und "featuredimagezoomer.js" hinein kopieren.

in der header.html vor {if has_rss}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="./js/featuredimagezoomer/jquery.min.js"></script>
<script type="text/javascript" src="./js/featuredimagezoomer/featuredimagezoomer.js">

/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
jQuery(document).ready(function($){

$('#imageZoom').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: '{media_src}'
})
})
</script>

in templates/deinTemplates jpg.html nach

das einfügen:
1
id="imageZoom"

fertig.

Interessant wird das ganze erst wenn man den bigmod eingebaut hat Smile
« Last Edit: July 14, 2010, 06:13:25 PM by Rembrandt » Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #6 on: July 14, 2010, 06:19:05 PM »

Aber wo ist der Unterscheid? Nur das die Pfade anders sind!? Das verstehe ich nicht!
Ich habe das jetzt so eingebaut, aber das Problem mit dem IE besteht immernoch, jedenfalls bei mir! Deine Demo Seite läuft da geht es auch im IE bei mir.
« Last Edit: July 14, 2010, 06:32:24 PM by Sumale.nin » Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 894

Vienna


View Profile WWW
« Reply #7 on: July 14, 2010, 06:50:54 PM »

versuch mal diese version

* jquery.min.zip (19.33 KB - downloaded 6 times.)
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #8 on: July 14, 2010, 07:16:48 PM »

Funktioniert auch nicht! Ich habe auch das Pagepeel raus genommen, daran lag es auch nicht!
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 894

Vienna


View Profile WWW
« Reply #9 on: July 14, 2010, 08:20:37 PM »

nimm mal die css styles raus
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #10 on: July 14, 2010, 08:33:18 PM »

Auch das bringt keine Abhilfe!
Logged
uli480
Pre-Newbie

Offline Offline

Posts: 9

Thank You
-Given: 2
-Receive: 0


View Profile
« Reply #11 on: July 15, 2010, 09:35:38 AM »

guter Mod, geht bei mir aber leider auch nicht
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #12 on: July 15, 2010, 09:41:27 AM »

Nach der Ursache wird noch gesucht!
Geht es nur im IE nicht oder auch im FF nicht?
Logged
uli480
Pre-Newbie

Offline Offline

Posts: 9

Thank You
-Given: 2
-Receive: 0


View Profile
« Reply #13 on: July 15, 2010, 11:05:35 AM »

bei beiden
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 165
-Receive: 80

Neverdie


View Profile
« Reply #14 on: July 15, 2010, 11:11:43 AM »

Hast du mal eine Demo?
Logged
Pages: [1] 2 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.309 seconds with 23 queries.
Post your comments here