Author Topic: [MOD] Featured Image Zoomer / Bilder heranzoomen  (Read 32132 times)

0 Members and 1 Guest are viewing this topic.

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
[MOD] Featured Image Zoomer / Bilder heranzoomen
« 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:
Code: [Select]
{header}Add after / Danach einfügen:
Code: [Select]
<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:
Code: [Select]
}Add after / Füge danach ein:
Code: [Select]
.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:
Code: [Select]
<imgReplace with / Ersetze mit:
Code: [Select]
<img id="image_id_<?php echo $image_id?>"
Step 4
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/media/png.html
Search / Suche:
Code: [Select]
<imgReplace with / Ersetze mit:
Code: [Select]
<img id="image_id_<?php echo $image_id?>"
Step 5
Open / Öffne: templates/YOUR-TEMPLATE-DEIN-TEMPLATE/media/gif.html
Search / Suche:
Code: [Select]
<imgReplace with / Ersetze mit:
Code: [Select]
<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
« Last Edit: July 14, 2010, 05:07:25 PM by Sumale.nin »

Rembrandt

  • Guest
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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 »

Rembrandt

  • Guest
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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.
Code: [Select]
<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

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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!

Rembrandt

  • Guest
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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}

Code: [Select]
<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
Code: [Select]
<img
das einfügen:
Code: [Select]
id="imageZoom"
fertig.

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

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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 »

Rembrandt

  • Guest
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #7 on: July 14, 2010, 06:50:54 PM »
versuch mal diese version

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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!

Rembrandt

  • Guest
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #9 on: July 14, 2010, 08:20:37 PM »
nimm mal die css styles raus

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #10 on: July 14, 2010, 08:33:18 PM »
Auch das bringt keine Abhilfe!

Offline uli480

  • Pre-Newbie
  • Posts: 9
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #11 on: July 15, 2010, 09:35:38 AM »
guter Mod, geht bei mir aber leider auch nicht

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« 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?

Offline uli480

  • Pre-Newbie
  • Posts: 9
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #13 on: July 15, 2010, 11:05:35 AM »
bei beiden

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Featured Image Zoomer / Bilder heranzoomen
« Reply #14 on: July 15, 2010, 11:11:43 AM »
Hast du mal eine Demo?