Moderator: HTML-Laie
Die beiden Stellen die rot leuchten müssen angepasst werden, je nach dem wo die beiden Datein auf deinem Webspace abgelegt werden im vergleich zur Galerie.<link rel="stylesheet" href="multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain 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({ // single image zoom
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'hayden.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom() // single image zoom with default options
$('#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
descArea: '#description', // description selector (optional - but required if descriptions are used) - new
speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true //<-- No comma after last option!
});
$('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
//^-- No comma after last option!
});
})
</script>
und so weiter, für jedes Bild das man zoomen möchte, kann man entweder image1 oder multizoom1 auswählen.<img id="image1" src="haydensmall.jpg" style="width:300px; height:200px" />
<img id="multizoom1" src="haydensmall2.jpg" style="width:300px; height:200px" />
Hallo ihr,thaileben hat geschrieben: Ich finde es sieht gut aus es ist halt nun mal so das die Servietten blass sind
hast ja Rosa Rose auch schon gecodet
so nun hast ja einiges zu tun -- vergiss das abstimmen vor lauter Arbeit nicht
Jürg
schön ihr beiden Hallo Jasko,Jasko hat geschrieben:Hier mal die Anleitung zu dem Dynamic Drive Teil.
Dieser Code KOmmt zwischen <head> und </head>Die beiden Stellen die rot leuchten müssen angepasst werden, je nach dem wo die beiden Datein auf deinem Webspace abgelegt werden im vergleich zur Galerie.<link rel="stylesheet" href="multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain 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({ // single image zoom
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'hayden.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom() // single image zoom with default options
$('#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
descArea: '#description', // description selector (optional - but required if descriptions are used) - new
speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true //<-- No comma after last option!
});
$('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
//^-- No comma after last option!
});
})
</script>
Diese Datein müssen heruntergeladen werden:
auch das Bild muss abgespeichert werden zwischen multizoom.css und samplepics.zip, wobei samplepics.zip nur die Bilder aus den Beispielen enthält und eigentlich nicht herunter geladen werden muss.
Jetzt muss man die JS Datei und die CSS Datei auf den eigenen Webspace hochladen am besten in einen Ordne bildzoom, oder so den man selbst anlegt, um zu wissen was die Datein machen. Dann das rote oben entsprechend anpassen z.B. bildzoom/multizoom.css und bildzoom/multizoom.js
Der letzte Schritt ist es in die Bilder die entsprechenden id zu setzen, Beispielund so weiter, für jedes Bild das man zoomen möchte, kann man entweder image1 oder multizoom1 auswählen.<img id="image1" src="haydensmall.jpg" style="width:300px; height:200px" />
<img id="multizoom1" src="haydensmall2.jpg" style="width:300px; height:200px" />
Probiere es aus auf deinem Rechner bevor du irgend etwas hochlädst, und schau ob es klapt, mit ganz gewöhnlichen html Datein, wenn es da klappt wird es auch online klappen.
MFG
schön
Butterblume hat geschrieben:@Moni, ich hatte von Sansiro mal ausprobiert, aber da musst du auf das Bild klicken und dann verschiebt sich der Rest. Hatte ich schon probiert.
Hallo Karin,Butterblume hat geschrieben:Nachtrag:Das von Jürg reicht. Danke Dir. Das verschiebt sich zwar auch, aber nicht so arg. Und wenn ich die Bilder nicht zu groß vergrößere, gehts vielleicht
für eure Hilfe!Jasko, mir gefällt das Dynamic Drive auch besser, aber ich kriege es nicht hin, es ist einfach zu schwer für mich!Jasko hat geschrieben:Ich finde das von Dynamic Drive für deine Seite besser, weil man da in die Motive zoomen kann, mehrfach sogar wenn man am Mausrad dreht, aber wenn dir das von Jürg reicht ist es OK.
<link rel="stylesheet" href="http://www.servietten-flohmarkt.de/bild ... tizoom.css" type="text/css" />Jasko hat geschrieben:<link rel="stylesheet" href="multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="multizoom.js">
Könntest Du mir ein Beispiel Anhand meiner Bilder geben, damit ich weiß wie das aus zu sehen hat!Jasko hat geschrieben:Der letzte Schritt ist es in die Bilder die entsprechenden id zu setzen, Beispiel<img id="image1" src="haydensmall.jpg" style="width:300px; height:200px" />
<img id="multizoom1" src="haydensmall2.jpg" style="width:300px; height:200px" />
schönMitglieder in diesem Forum: 0 Mitglieder und 52 Gäste
für all eure Bemühungen!