• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder mit zoomeffekt

P

picturesworld

Neues Mitglied
Hallo zusammen,

ich habe eine tolle Funktion entdeckt, die ich gerne einbauen möchte.
Nun ist mein Fachwissen dazu nicht ausreichend und benötige unter-
stützung.

Dieses funktion hätte ich gerne (Demo 3)
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

Habs auch schonmal versucht, aber ich blicke da nicht durch. Mein
Englisch ist eher gewagt statt gefragt und dementsprechend sehr
schlecht.

Was ich sehe ist, dass es sich um css und html handelt. Mein Problem,
was ich überhaupt nicht verstehe ist, was muss ich für die 3. demo in
den css bereich einbinden und was in dem html teil?

ich habe meine internetseite bei npage, wo die css- datei nicht in dem
html teil eingebaut ist. Ich habe für css eine extra seite, wo nur css reinkommt.

Würde mich über Hilfe freuen.

LG
 
Nein, das ist JavaScript, genauer gesagt die jQuery-Bibliothek.

Wie sieht denn dein bisheriger Versuch aus?
 
Was bedeutet das genau? Kann ich dies für Npage nicht nutzen?

Mein bisheriger versuch sa so aus, dass ich mir die komplette hp geschrotet habe
und demnach von vorne anfangen will. Dazu fange ich aber erstmal mit diesem Zoom
Bildern an.

so wie ich es herauslese, muss ich folgendes in den css teil einbinden. Weiß auch da
nicht wo oder ob es egal ist und ich es einfach unten dran hängen kann.
Code: 
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
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;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="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($){

    $('#image1').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
    })
    
    $('#image2').addimagezoom({
        zoomrange: [5, 5],
        magnifiersize: [400,400],
        magnifierpos: 'right',
        largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
    })

    $('#image3').addimagezoom()

})

und das in dem html-code
Code: 
<style type="text/css">
</script>

und dann habe ich dieses noch gesehen. Das vermute ich einfachmal kommt in eine Textseite.
Code: 
<p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>

Und alles in allem, habe ich keinerlei Idee, wie das funktionieren kann :cry:
 
Nein, das hier

Code: 
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
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;
}

gehört in deine CSS-Datei.

Das hier

Code: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="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($){

    $('#image1').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
    })
    
    $('#image2').addimagezoom({
        zoomrange: [5, 5],
        magnifiersize: [400,400],
        magnifierpos: 'right',
        largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
    })

    $('#image3').addimagezoom()

})

ist JavaScript und müsste soweit ich das sehe in deine HTML-Datei.

Die Dynamic Drive DHTML Scripts- Simple Image Panner and Zoomer ist schon ziemlich gut - wenn man sich mit JavaScript und CSS auskennt. Da scheint es bei dir noch etwas dran zu mangeln. Schau dir mal die Unterschiede von HTML,CSS und JavaScript an.

Und ja, das kann man eigentlich bei jedem Hoster einsetzen.
 
Huhu,

ich hab das jetzt mal versucht, wie du es geschrieben hast.

Meine seite bleibt leer.
Hab den oberen teil in die css eingebunden
und den unteren teil in die textseite.

Passiert nichts :-(.
 
Hallo threadi,

ja die seite lautet wie folgt:
Ihr Homepagetitel

Ich steuer die ganze hompage über Npage.
Welchen quelltext willst du denn haben?

Vielleicht hilft es dir mehr, wenn ich es etwas besser beschreibe, wo ich über all diesen effekt haben möchte.
Wenn du bspw. auf der startseite bist, siehst du rechts eine navigation. Klicke dort auf "Accissoires". Dann
erscheint dort eine Tabelle, wo sich kleine Bilder befinden. Und bei diesen Bildern, möchte ich gerne den effekt
haben. Grob gesagt nicht nur bei Accessoires sondern wirklich in jeder Rubrik.

Derzeit habe ich zwei Designs, die sich kaum unterscheiden. Einmal eins für die Startseite und eins für die Tex-
tseiten. Warum? Wenn ich das Design von der Startseite nehmen würde, würde der Inhalt der einzelnen Textseiten
unter dem eigentlichen design angezeigt. Kurz gesagt unter dem Footer. Daher habe ich das Startseitendesign so
leer gemacht, dass man die Inhalte der Textseiten korrekt sieht.

Daher jetzt die Frage, welchen Quelltext du gerne hättest.

LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben