Vergrößern der Bilder
Moderator: HTML-Laie
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Vergrößern der Bilder
Hallo Jasko,
ich habe ja gesagt, das meins anders aussieht.
Habe jetzt erst einmal alles vom Server genommen. Sieht so aus, als hättest Du eine andere Datei?
Ich hatte das von dieser Seite runter gespeichert!
http://www.dynamicdrive.com/dynamicinde ... zoomer.htm
Wo hast Du denn Deine her? Kann ich nicht finden
ich habe ja gesagt, das meins anders aussieht.
Habe jetzt erst einmal alles vom Server genommen. Sieht so aus, als hättest Du eine andere Datei?
Ich hatte das von dieser Seite runter gespeichert!
http://www.dynamicdrive.com/dynamicinde ... zoomer.htm
Wo hast Du denn Deine her? Kann ich nicht finden
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Vergrößern der Bilder
Hallo Jasko,
ich nochmal. Hatte ja in meinem vorigen Beitrag geschrieben, dass ich jetzt erst einmal alles lösche was diese Dateien betrifft.
Nun habe ich hier http://www.dynamicdrive.com/dynamicinde ... agnify.htm folgedne Dateien runter gespeichert und auf meinem Server hoch geladen
jquery.magnifier.js
magnify.cur (custom magnifier image cursor for IE browsers)
Wenn ich die Datei jquery.magnifier.js jetzt in meinem Notepad öffne, sehe ich folgenden Code
Wo wir wieder beim Anfang wären, dass der Code (die Zeile 3) bei mir anders aussieht als bei Dir?!
ich nochmal. Hatte ja in meinem vorigen Beitrag geschrieben, dass ich jetzt erst einmal alles lösche was diese Dateien betrifft.
Nun habe ich hier http://www.dynamicdrive.com/dynamicinde ... agnify.htm folgedne Dateien runter gespeichert und auf meinem Server hoch geladen
jquery.magnifier.js
magnify.cur (custom magnifier image cursor for IE browsers)
Wenn ich die Datei jquery.magnifier.js jetzt in meinem Notepad öffne, sehe ich folgenden Code
Code: Alles auswählen
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/
jQuery.noConflict()
jQuery.imageMagnify={
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
zIndexcounter: 100,
refreshoffsets:function($window, $target, warpshell){
var $offsets=$target.offset()
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
warpshell.newattrs.x=winattrs.x+5
}
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
warpshell.newattrs.y=winattrs.y+5
}
},
magnify:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={}
newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
$target.css('cursor', jQuery.imageMagnify.cursorcss)
if ($target.data('imgshell')){
$target.data('imgshell').$clone.remove()
$target.css({opacity:1}).unbind('click.magnify')
}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
$target.bind('click.magnify', function(e){ //action when original image is clicked on
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=$this.data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
//none added
}) //end animate
}) //end click
$clone.click(function(e){ //action when magnified image is clicked on
var $this=$(this)
var imageinfo=$this.data('$relatedtarget').data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){
$this.hide()
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
}) //end animate
}) //end click
}
};
jQuery.fn.imageMagnify=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
jQuery.imageMagnify.magnify($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imageMagnify.magnify($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imageMagnify.magnify($, $imgref, options)
})
}
})
};
jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
})
};
//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
jQuery(document).ready(function($){
var $targets=$('.magnify')
$targets.each(function(i){
var $target=$(this)
var options={}
if ($target.attr('data-magnifyto'))
options.magnifyto=parseFloat($target.attr('data-magnifyto'))
if ($target.attr('data-magnifyby'))
options.magnifyby=parseFloat($target.attr('data-magnifyby'))
if ($target.attr('data-magnifyduration'))
options.duration=parseInt($target.attr('data-magnifyduration'))
$target.imageMagnify(options)
})
var $triggers=$('a[rel^="magnify["]')
$triggers.each(function(i){
var $trigger=$(this)
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
$trigger.data('magnifyimageid', targetid)
$trigger.click(function(e){
$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
e.preventDefault()
})
})
})
Wo wir wieder beim Anfang wären, dass der Code (die Zeile 3) bei mir anders aussieht als bei Dir?!
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Vergrößern der Bilder
Butterblume hat geschrieben:Hallo nochmal,
Ich hätte nämlich gern das Demo 1 vonder Seite.
den Step 1 von diesem Link http://www.dynamicdrive.com/dynamicinde ... zoomer.htm habe ich jetzt in den header.metatags in dem Ordner wo die ganzen Verkaufs Seiten vom Flohmarkt drin sind eingefügt. aber ich weiß nicht genau wo ich Step 2 einfügen muss?
Ich habe hier nur DEMO 1 gelesen und Demo 1 ist etwas anderes als der Link zoomer, der da folgt. Ich habe mich bei Demo 1 auf Beispiel 1 konzentriert, also auf den ersten Link. Sorry, Misverständniss
Natürlich müssen beim zoomer die Datein:
- multizoom.js
- multizoom.css
Code: Alles auswählen
<link rel="stylesheet" href="multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (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>
Code: Alles auswählen
<img id="image1" border="0" src="haydensmall.jpg" style="width:250px;height:338px">
MFG
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Vergrößern der Bilder
Hallo und guten morgen Jasko,
bin jetzt nicht gans sicher obe es so richtig ist. Habe nun die beiden richtigen Dateien auf meinen Server geladen und den Code aus Step1 in meinen Haeder Metatags eingefügt.
Das muss aber jetzt nicht in jeden Metatag, oder? Ich habe den jetzt nur im Ornder Angebot wo ich meine Servietten Seite für den Flohmarkt drin habe!
Zeile fünf habe ich wie folgt geändert.
bin jetzt aber wie gesagt nicht sicher ob es so richtig ist? Und wie der Code in Zeile 1 aussehen muss, da hab ich jetzt so gar keinen Schimmer. An welcher Stelle muss der geändert werden? Da steht kein src...
Und das mit den Bildern habe ich jetzt so geändert?
der ist in einer Tabelle!
Ich möchte noch dazu sagen, dass ich meine großen Bilder im Ordner images/vergroesserung/blumen/1.jpg habe. Nur für den Fall, dass ich das irgendwo einfügen muss?!
Wenn man da jetzt schon rüberfährt merkt man, das da was anders ist, aber eben noch nicht richtig!
bin jetzt nicht gans sicher obe es so richtig ist. Habe nun die beiden richtigen Dateien auf meinen Server geladen und den Code aus Step1 in meinen Haeder Metatags eingefügt.
Das muss aber jetzt nicht in jeden Metatag, oder? Ich habe den jetzt nur im Ornder Angebot wo ich meine Servietten Seite für den Flohmarkt drin habe!
Zeile fünf habe ich wie folgt geändert.
Code: Alles auswählen
<script type="text/javascript" src="http://www.servietten-flohmarkt.de/design/multizoom.js">
bin jetzt aber wie gesagt nicht sicher ob es so richtig ist? Und wie der Code in Zeile 1 aussehen muss, da hab ich jetzt so gar keinen Schimmer. An welcher Stelle muss der geändert werden? Da steht kein src...
Und das mit den Bildern habe ich jetzt so geändert?
Code: Alles auswählen
<td><img id="image1" border="0" src="http://www.servietten-flohmarkt.de/images/blumen/1.jpg" style="width:112px;height:112px"></td>
Ich möchte noch dazu sagen, dass ich meine großen Bilder im Ordner images/vergroesserung/blumen/1.jpg habe. Nur für den Fall, dass ich das irgendwo einfügen muss?!
Wenn man da jetzt schon rüberfährt merkt man, das da was anders ist, aber eben noch nicht richtig!
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Vergrößern der Bilder
Hatte gehofft hier dasshier noch einmal jemand was zu sagt?
Ich habe das jetzt einfach mal so geändert, bin aber nicht sicher ob das richrtig ist?!
Wie schon gesagt, wenn man die Seite öffnet, dann sieht man schon was beim ersten Bild, aber es ist noch nicht so richtig!
http://www.servietten-flohmarkt.de/angebot/blumen.php
Ich habe das jetzt einfach mal so geändert, bin aber nicht sicher ob das richrtig ist?!
Code: Alles auswählen
<link rel="stylesheet" href="http://www.servietten-flohmarkt.de/design/multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.servietten-flohmarkt.de/design/multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (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>
http://www.servietten-flohmarkt.de/angebot/blumen.php
- sansiro
- Webmaster Meister
- Beiträge: 933
- Registriert: Do 20. Okt 2011, 21:40
- Mein Vorname: Peter
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Vergrößern der Bilder
Hallo Sansiro,
ist ja lieb gemeint jetzt mit dem Link. Sowas hatte ich schon probiert, und da verschiebt sich alles. Deshalb hatte ich mit Jasko ja dieses zooom ausprobiert.
Na ich warte nochmal, vielleicht hat er ja irgendwann nochmal Zeit und sieht sich das an!
Dir aber auch ein liebes schön für Deine Hilfe!
ist ja lieb gemeint jetzt mit dem Link. Sowas hatte ich schon probiert, und da verschiebt sich alles. Deshalb hatte ich mit Jasko ja dieses zooom ausprobiert.
Na ich warte nochmal, vielleicht hat er ja irgendwann nochmal Zeit und sieht sich das an!
Dir aber auch ein liebes schön für Deine Hilfe!
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Vergrößern der Bilder
Butterblume hat geschrieben:Hallo Sansiro,
ist ja lieb gemeint jetzt mit dem Link. Sowas hatte ich schon probiert, und da verschiebt sich alles.
Finde das Konzept vom Sansiro sehr schön und bei mir verschiebt sich ja nichts
Viele Grüße ...Monika
- sansiro
- Webmaster Meister
- Beiträge: 933
- Registriert: Do 20. Okt 2011, 21:40
- Mein Vorname: Peter
Re: Vergrößern der Bilder
Sorry, aber wo verschiebt sich denn da was? Ich stelle hier nicht erneut ein Script ein was genauso funktioniert wie das erste. Anscheinend hast Du es warscheinlich garnicht ausprobiert.Butterblume hat geschrieben:Hallo Sansiro,
ist ja lieb gemeint jetzt mit dem Link. Sowas hatte ich schon probiert, und da verschiebt sich alles. Deshalb hatte ich mit Jasko ja dieses zooom ausprobiert.
Vielleicht kann jemand anderes dieses Script gebrauchen. Dir weiterhin viel Erfolg beim Einbauen Deines JQuery Scripts.
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Vergrößern der Bilder
Ich konnte die Tage nicht viel schreiben, auch jetzt bin ich knapp mit der Zeit. Auf den Beispielseiten sind ja die Skripte eingebaut, am bessten dort abschauen und nachbauen, vieleicht nicht direkt im eignen Design sondern auf einer Probe Seite und wenn es dann richtig geht, dort einbauen wo es soll.
MFG
MFG
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 8 Gäste