javascript divbox img functie veranderen
ik heb een javascript van internet getrokken alleen wil ik deze iets veranderen. want het script zorgt ervoor dat wanneer je op een link klikt een div box verschijnt met een vergroting van het plaatje.
Nu wil ik het script zo veranderen dat je niet op de link moet klikken maar gewoon op het plaatje. Alleen kom ik hier niet uit...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
var plusimageviewer={
enlargeboxmarkup: '<div class="enlargebox"><div class="title"><img src="image/closebox.gif" style="margin: 2px 1px 1px 0" title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds
//////////NO NEED TO EDIT BEYOND HERE/////////////
pluscontainers:[],
$enlargebox: null,
boxzindex:100,
getcaptionposition:function($img){
var offsets=$img.offset()
return [offsets.left=500, offsets.top=200] //plek van het venster
},
getlargeimgposition:function($, $enlargebox){
var boxdimensions=[$enlargebox.outerWidth(), $enlargebox.outerHeight()]
var docdimensions=[$(window).width(), $(window).height()]
var docscrollpos=[$(document).scrollLeft(), $(document).scrollTop()]
var leftpos=(docdimensions[0]>boxdimensions[0])? docscrollpos[0]+docdimensions[0]/2-boxdimensions[0]/2 : docscrollpos[0]+1 //center large image horizontally
var toppos=(docdimensions[1]>boxdimensions[1])? docscrollpos[1]+docdimensions[1]/2-boxdimensions[1]/2 : docscrollpos[1]+1
return [leftpos, toppos]
},
showimage:function($, $img){
var pluscontainer=this.pluscontainers[$img.data('order')]
pluscontainer.$enlargearea.empty().html('<a href="#"><img src="'+pluscontainer.enlargesrc+'" style="width:'+pluscontainer.enlargesize[0]+';" height:'+pluscontainer.enlargesize[1]+'" /></a>')
var largeimgpos=this.getlargeimgposition($, pluscontainer.$enlargebox)
pluscontainer.$enlargebox.css({zIndex:++this.boxzindex, display:'none', left:largeimgpos[0], top:largeimgpos[1]}).fadeIn(this.fadeduration[0])
},
init:function($, $img){
var captionpos=this.getcaptionposition($img)
var $caption=$('<div class="enlargecaption"><a href="#">View Full Image</a></div>').css({left:captionpos[0], top:captionpos[1]}).appendTo(document.body)
var $enlargebox=$(this.enlargeboxmarkup).appendTo(document.body)
var $enlargearea=$enlargebox.find('.largeimage:eq(0)') //reference DIV that will contain actual enlarged image
var enlargesrc=$img.attr('data-plusimage')
var enlargesize=$img.attr('data-plussize').split(',') //get dimensions of large image as string
enlargesize=[parseInt(enlargesize[0]), parseInt(enlargesize[1])] //get dimensions of large image as array [w, h]
$plaatje.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
$enlargebox.click(function(e){
e.stopPropagation()
}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
$enlargebox.fadeOut(plusimageviewer.fadeduration[1])
})
this.pluscontainers.push({$img:$img, $caption:$caption, $plaatje:$plaatje, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})
}
}
jQuery(document).ready(function($){
var $targetimages=$('img[data-plusimage]')
$targetimages.each(function(i){
var $img=$(this).data('order', i)
plusimageviewer.init($, $(this), i)
})
if ($targetimages.length>0){
$(document).click(function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
pluscontainers[i].$enlargebox.hide()
}
})
$(window).bind('resize', function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
var captionpos=plusimageviewer.getcaptionposition(pluscontainers[i].$img)
pluscontainers[i].captionpos=[captionpos[0], captionpos[1]] //refresh caption position
pluscontainers[i].$caption.css({left:pluscontainers[i].captionpos[0], top:pluscontainers[i].captionpos[1]}) //reposition captions when window resized
}
})
}
})
enlargeboxmarkup: '<div class="enlargebox"><div class="title"><img src="image/closebox.gif" style="margin: 2px 1px 1px 0" title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds
//////////NO NEED TO EDIT BEYOND HERE/////////////
pluscontainers:[],
$enlargebox: null,
boxzindex:100,
getcaptionposition:function($img){
var offsets=$img.offset()
return [offsets.left=500, offsets.top=200] //plek van het venster
},
getlargeimgposition:function($, $enlargebox){
var boxdimensions=[$enlargebox.outerWidth(), $enlargebox.outerHeight()]
var docdimensions=[$(window).width(), $(window).height()]
var docscrollpos=[$(document).scrollLeft(), $(document).scrollTop()]
var leftpos=(docdimensions[0]>boxdimensions[0])? docscrollpos[0]+docdimensions[0]/2-boxdimensions[0]/2 : docscrollpos[0]+1 //center large image horizontally
var toppos=(docdimensions[1]>boxdimensions[1])? docscrollpos[1]+docdimensions[1]/2-boxdimensions[1]/2 : docscrollpos[1]+1
return [leftpos, toppos]
},
showimage:function($, $img){
var pluscontainer=this.pluscontainers[$img.data('order')]
pluscontainer.$enlargearea.empty().html('<a href="#"><img src="'+pluscontainer.enlargesrc+'" style="width:'+pluscontainer.enlargesize[0]+';" height:'+pluscontainer.enlargesize[1]+'" /></a>')
var largeimgpos=this.getlargeimgposition($, pluscontainer.$enlargebox)
pluscontainer.$enlargebox.css({zIndex:++this.boxzindex, display:'none', left:largeimgpos[0], top:largeimgpos[1]}).fadeIn(this.fadeduration[0])
},
init:function($, $img){
var captionpos=this.getcaptionposition($img)
var $caption=$('<div class="enlargecaption"><a href="#">View Full Image</a></div>').css({left:captionpos[0], top:captionpos[1]}).appendTo(document.body)
var $enlargebox=$(this.enlargeboxmarkup).appendTo(document.body)
var $enlargearea=$enlargebox.find('.largeimage:eq(0)') //reference DIV that will contain actual enlarged image
var enlargesrc=$img.attr('data-plusimage')
var enlargesize=$img.attr('data-plussize').split(',') //get dimensions of large image as string
enlargesize=[parseInt(enlargesize[0]), parseInt(enlargesize[1])] //get dimensions of large image as array [w, h]
$plaatje.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
$enlargebox.click(function(e){
e.stopPropagation()
}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
$enlargebox.fadeOut(plusimageviewer.fadeduration[1])
})
this.pluscontainers.push({$img:$img, $caption:$caption, $plaatje:$plaatje, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})
}
}
jQuery(document).ready(function($){
var $targetimages=$('img[data-plusimage]')
$targetimages.each(function(i){
var $img=$(this).data('order', i)
plusimageviewer.init($, $(this), i)
})
if ($targetimages.length>0){
$(document).click(function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
pluscontainers[i].$enlargebox.hide()
}
})
$(window).bind('resize', function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
var captionpos=plusimageviewer.getcaptionposition(pluscontainers[i].$img)
pluscontainers[i].captionpos=[captionpos[0], captionpos[1]] //refresh caption position
pluscontainers[i].$caption.css({left:pluscontainers[i].captionpos[0], top:pluscontainers[i].captionpos[1]}) //reposition captions when window resized
}
})
}
})
Code (php)
1
2
3
4
5
2
3
4
5
$plaatje.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
De variabele "$plaatje" kom ik verder nergens tegen en is in het Nederlands ipv Engels....
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* Plus Size Image Viewer
* Last updated: Jan 11th, 2009. This notice must stay intact for usage
* Author: JavaScript Kit at http://www.javascriptkit.com/
* Visit http://www.javascriptkit.com/ for full source code
*/
var plusimageviewer={
enlargeboxmarkup: '<div class="enlargebox"><div class="title"><img src="image/closebox.gif" style="margin: 2px 1px 1px 0" title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds
//////////NO NEED TO EDIT BEYOND HERE/////////////
pluscontainers:[],
$enlargebox: null,
boxzindex:100,
getcaptionposition:function($img){
var offsets=$img.offset()
return [offsets.left+this.captionoffset[0], offsets.top+$img.outerHeight()+this.captionoffset[1]] //return position of caption relative to thumb image
},
getlargeimgposition:function($, $enlargebox){
var boxdimensions=[$enlargebox.outerWidth(), $enlargebox.outerHeight()]
var docdimensions=[$(window).width(), $(window).height()]
var docscrollpos=[$(document).scrollLeft(), $(document).scrollTop()]
var leftpos=(docdimensions[0]>boxdimensions[0])? docscrollpos[0]+docdimensions[0]/2-boxdimensions[0]/2 : docscrollpos[0]+1 //center large image horizontally
var toppos=(docdimensions[1]>boxdimensions[1])? docscrollpos[1]+docdimensions[1]/2-boxdimensions[1]/2 : docscrollpos[1]+1
return [leftpos, toppos]
},
showimage:function($, $img){
var pluscontainer=this.pluscontainers[$img.data('order')]
pluscontainer.$enlargearea.empty().html('<img src="'+pluscontainer.enlargesrc+'" style="width:'+pluscontainer.enlargesize[0]+';" height:'+pluscontainer.enlargesize[1]+'" />')
var largeimgpos=this.getlargeimgposition($, pluscontainer.$enlargebox)
pluscontainer.$enlargebox.css({zIndex:++this.boxzindex, display:'none', left:largeimgpos[0], top:largeimgpos[1]}).fadeIn(this.fadeduration[0])
},
init:function($, $img){
var captionpos=this.getcaptionposition($img)
var $caption=$('<div class="enlargecaption"><a href="#">View Full Image</a></div>').css({left:captionpos[0], top:captionpos[1]}).appendTo(document.body)
var $enlargebox=$(this.enlargeboxmarkup).appendTo(document.body)
var $enlargearea=$enlargebox.find('.largeimage:eq(0)') //reference DIV that will contain actual enlarged image
var enlargesrc=$img.attr('data-plusimage')
var enlargesize=$img.attr('data-plussize').split(',') //get dimensions of large image as string
enlargesize=[parseInt(enlargesize[0]), parseInt(enlargesize[1])] //get dimensions of large image as array [w, h]
$caption.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
$enlargebox.click(function(e){
e.stopPropagation()
}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
$enlargebox.fadeOut(plusimageviewer.fadeduration[1])
})
this.pluscontainers.push({$img:$img, $caption:$caption, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})
}
}
jQuery(document).ready(function($){
var $targetimages=$('img[data-plusimage]')
$targetimages.each(function(i){
var $img=$(this).data('order', i)
plusimageviewer.init($, $(this), i)
})
if ($targetimages.length>0){
$(document).click(function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
pluscontainers[i].$enlargebox.hide()
}
})
$(window).bind('resize', function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
var captionpos=plusimageviewer.getcaptionposition(pluscontainers[i].$img)
pluscontainers[i].captionpos=[captionpos[0], captionpos[1]] //refresh caption position
pluscontainers[i].$caption.css({left:pluscontainers[i].captionpos[0], top:pluscontainers[i].captionpos[1]}) //reposition captions when window resized
}
})
}
})
* Last updated: Jan 11th, 2009. This notice must stay intact for usage
* Author: JavaScript Kit at http://www.javascriptkit.com/
* Visit http://www.javascriptkit.com/ for full source code
*/
var plusimageviewer={
enlargeboxmarkup: '<div class="enlargebox"><div class="title"><img src="image/closebox.gif" style="margin: 2px 1px 1px 0" title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds
//////////NO NEED TO EDIT BEYOND HERE/////////////
pluscontainers:[],
$enlargebox: null,
boxzindex:100,
getcaptionposition:function($img){
var offsets=$img.offset()
return [offsets.left+this.captionoffset[0], offsets.top+$img.outerHeight()+this.captionoffset[1]] //return position of caption relative to thumb image
},
getlargeimgposition:function($, $enlargebox){
var boxdimensions=[$enlargebox.outerWidth(), $enlargebox.outerHeight()]
var docdimensions=[$(window).width(), $(window).height()]
var docscrollpos=[$(document).scrollLeft(), $(document).scrollTop()]
var leftpos=(docdimensions[0]>boxdimensions[0])? docscrollpos[0]+docdimensions[0]/2-boxdimensions[0]/2 : docscrollpos[0]+1 //center large image horizontally
var toppos=(docdimensions[1]>boxdimensions[1])? docscrollpos[1]+docdimensions[1]/2-boxdimensions[1]/2 : docscrollpos[1]+1
return [leftpos, toppos]
},
showimage:function($, $img){
var pluscontainer=this.pluscontainers[$img.data('order')]
pluscontainer.$enlargearea.empty().html('<img src="'+pluscontainer.enlargesrc+'" style="width:'+pluscontainer.enlargesize[0]+';" height:'+pluscontainer.enlargesize[1]+'" />')
var largeimgpos=this.getlargeimgposition($, pluscontainer.$enlargebox)
pluscontainer.$enlargebox.css({zIndex:++this.boxzindex, display:'none', left:largeimgpos[0], top:largeimgpos[1]}).fadeIn(this.fadeduration[0])
},
init:function($, $img){
var captionpos=this.getcaptionposition($img)
var $caption=$('<div class="enlargecaption"><a href="#">View Full Image</a></div>').css({left:captionpos[0], top:captionpos[1]}).appendTo(document.body)
var $enlargebox=$(this.enlargeboxmarkup).appendTo(document.body)
var $enlargearea=$enlargebox.find('.largeimage:eq(0)') //reference DIV that will contain actual enlarged image
var enlargesrc=$img.attr('data-plusimage')
var enlargesize=$img.attr('data-plussize').split(',') //get dimensions of large image as string
enlargesize=[parseInt(enlargesize[0]), parseInt(enlargesize[1])] //get dimensions of large image as array [w, h]
$caption.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
$enlargebox.click(function(e){
e.stopPropagation()
}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
$enlargebox.fadeOut(plusimageviewer.fadeduration[1])
})
this.pluscontainers.push({$img:$img, $caption:$caption, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})
}
}
jQuery(document).ready(function($){
var $targetimages=$('img[data-plusimage]')
$targetimages.each(function(i){
var $img=$(this).data('order', i)
plusimageviewer.init($, $(this), i)
})
if ($targetimages.length>0){
$(document).click(function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
pluscontainers[i].$enlargebox.hide()
}
})
$(window).bind('resize', function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
var captionpos=plusimageviewer.getcaptionposition(pluscontainers[i].$img)
pluscontainers[i].captionpos=[captionpos[0], captionpos[1]] //refresh caption position
pluscontainers[i].$caption.css({left:pluscontainers[i].captionpos[0], top:pluscontainers[i].captionpos[1]}) //reposition captions when window resized
}
})
}
})
je hebt gelijk de verkeerde code gepost
Gewijzigd op 24/12/2011 12:41:45 door arend b
Dus:
Code (php)
1
2
3
4
5
2
3
4
5
$img.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
plusimageviewer.showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})