Chrome laat afbeeldingen niet correct zien.
Ik heb een probleem met mijn script. Bij het laden van de pagina laat hij alleen in chrome het plaatje volledig zien i.p.v. een klikbare thumbnail.
Hier het script:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="view_product clearfix">
<div class="img clearfix">
{if !$productafbeelding}
<img src="{$site_url}/style/{$TEMPLATE_DIR}/theme/images/noimage.jpg" alt="" class="resize_180_180" />
{else}
<a href="{$site_url}/beheer/images/producten/fullsize/{$productafbeelding.filename}" class="fb dblock aligncenter">
<img src="{$site_url}/beheer/images/producten/fullsize/{$productafbeelding.filename}" alt="" class="resize_180_180" />
<br />
<span class="icon icon-enlarge">Bekijk vergroting</span>
</a>
{/if}
{if $product_row.afbeelding2 != 0 && $product_row.afbeelding2 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding2}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding2}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding3 != 0 && $product_row.afbeelding3 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding3}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding3}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding4 != 0 && $product_row.afbeelding4 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding4}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding4}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding5 != 0 && $product_row.afbeelding5 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding5}" class="fb dblock margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding5}" alt="" class="resize_40_60" /></a>{/if}
{foreach from=$productafbeeldingen item=productafb}
<a href="{$site_url}/beheer/images/producten/fullsize/{$productafb.filename}" class="w19 fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/thumb/{$productafb.filename}" alt="" class="resize_40_60" /></a>
{/foreach}
</div>
<div class="img clearfix">
{if !$productafbeelding}
<img src="{$site_url}/style/{$TEMPLATE_DIR}/theme/images/noimage.jpg" alt="" class="resize_180_180" />
{else}
<a href="{$site_url}/beheer/images/producten/fullsize/{$productafbeelding.filename}" class="fb dblock aligncenter">
<img src="{$site_url}/beheer/images/producten/fullsize/{$productafbeelding.filename}" alt="" class="resize_180_180" />
<br />
<span class="icon icon-enlarge">Bekijk vergroting</span>
</a>
{/if}
{if $product_row.afbeelding2 != 0 && $product_row.afbeelding2 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding2}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding2}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding3 != 0 && $product_row.afbeelding3 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding3}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding3}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding4 != 0 && $product_row.afbeelding4 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding4}" class="fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding4}" alt="" class="resize_40_60" /></a>{/if}
{if $product_row.afbeelding5 != 0 && $product_row.afbeelding5 != ''}<a href="{$site_url}/beheer/images/producten/{$product_row.afbeelding5}" class="fb dblock margin-top floatleft"><img src="{$site_url}/beheer/images/producten/{$product_row.afbeelding5}" alt="" class="resize_40_60" /></a>{/if}
{foreach from=$productafbeeldingen item=productafb}
<a href="{$site_url}/beheer/images/producten/fullsize/{$productafb.filename}" class="w19 fb dblock margin-right margin-top floatleft"><img src="{$site_url}/beheer/images/producten/thumb/{$productafb.filename}" alt="" class="resize_40_60" /></a>
{/foreach}
</div>
Alvast bedankt voor de hulp!
Gewijzigd op 25/09/2012 20:21:41 door Rob Mulder
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
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
##############################
# ----- API FUNCTIONS ------ #
##############################
/**
* Resizes an image to be no larger than $maxWidth or $maxHeight
*
* If either param is set to zero, then that dimension will not be considered as a part of the resize.
* Additionally, if $this->options['resizeUp'] is set to true (false by default), then this function will
* also scale the image up to the maximum dimensions provided.
*
* @param int $maxWidth The maximum width of the image in pixels
* @param int $maxHeight The maximum height of the image in pixels
* @return GdThumb
*/
public function resize ($maxWidth = 0, $maxHeight = 0)
{
// make sure our arguments are valid
if (!is_numeric($maxWidth))
{
throw new InvalidArgumentException('$maxWidth must be numeric');
}
if (!is_numeric($maxHeight))
{
throw new InvalidArgumentException('$maxHeight must be numeric');
}
// make sure we're not exceeding our image size if we're not supposed to
if ($this->options['resizeUp'] === false)
{
$this->maxHeight = (intval($maxHeight) > $this->currentDimensions['height']) ? $this->currentDimensions['height'] : $maxHeight;
$this->maxWidth = (intval($maxWidth) > $this->currentDimensions['width']) ? $this->currentDimensions['width'] : $maxWidth;
}
else
{
$this->maxHeight = intval($maxHeight);
$this->maxWidth = intval($maxWidth);
}
// get the new dimensions...
$this->calcImageSize($this->currentDimensions['width'], $this->currentDimensions['height']);
// create the working image
if (function_exists('imagecreatetruecolor'))
{
$this->workingImage = imagecreatetruecolor($this->newDimensions['newWidth'], $this->newDimensions['newHeight']);
}
else
{
$this->workingImage = imagecreate($this->newDimensions['newWidth'], $this->newDimensions['newHeight']);
}
$this->preserveAlpha();
// and create the newly sized image
imagecopyresampled
(
$this->workingImage,
$this->oldImage,
0,
0,
0,
0,
$this->newDimensions['newWidth'],
$this->newDimensions['newHeight'],
$this->currentDimensions['width'],
$this->currentDimensions['height']
);
// update all the variables and resources to be correct
$this->oldImage = $this->workingImage;
$this->currentDimensions['width'] = $this->newDimensions['newWidth'];
$this->currentDimensions['height'] = $this->newDimensions['newHeight'];
return $this;
}
# ----- API FUNCTIONS ------ #
##############################
/**
* Resizes an image to be no larger than $maxWidth or $maxHeight
*
* If either param is set to zero, then that dimension will not be considered as a part of the resize.
* Additionally, if $this->options['resizeUp'] is set to true (false by default), then this function will
* also scale the image up to the maximum dimensions provided.
*
* @param int $maxWidth The maximum width of the image in pixels
* @param int $maxHeight The maximum height of the image in pixels
* @return GdThumb
*/
public function resize ($maxWidth = 0, $maxHeight = 0)
{
// make sure our arguments are valid
if (!is_numeric($maxWidth))
{
throw new InvalidArgumentException('$maxWidth must be numeric');
}
if (!is_numeric($maxHeight))
{
throw new InvalidArgumentException('$maxHeight must be numeric');
}
// make sure we're not exceeding our image size if we're not supposed to
if ($this->options['resizeUp'] === false)
{
$this->maxHeight = (intval($maxHeight) > $this->currentDimensions['height']) ? $this->currentDimensions['height'] : $maxHeight;
$this->maxWidth = (intval($maxWidth) > $this->currentDimensions['width']) ? $this->currentDimensions['width'] : $maxWidth;
}
else
{
$this->maxHeight = intval($maxHeight);
$this->maxWidth = intval($maxWidth);
}
// get the new dimensions...
$this->calcImageSize($this->currentDimensions['width'], $this->currentDimensions['height']);
// create the working image
if (function_exists('imagecreatetruecolor'))
{
$this->workingImage = imagecreatetruecolor($this->newDimensions['newWidth'], $this->newDimensions['newHeight']);
}
else
{
$this->workingImage = imagecreate($this->newDimensions['newWidth'], $this->newDimensions['newHeight']);
}
$this->preserveAlpha();
// and create the newly sized image
imagecopyresampled
(
$this->workingImage,
$this->oldImage,
0,
0,
0,
0,
$this->newDimensions['newWidth'],
$this->newDimensions['newHeight'],
$this->currentDimensions['width'],
$this->currentDimensions['height']
);
// update all the variables and resources to be correct
$this->oldImage = $this->workingImage;
$this->currentDimensions['width'] = $this->newDimensions['newWidth'];
$this->currentDimensions['height'] = $this->newDimensions['newHeight'];
return $this;
}
Hier is de pagina zelf:
http://www.shiftgear.nl/artikel/12/coming-homeleaving-home-bi-module
Toevoeging op 26/09/2012 15:59:03:
Ik heb nog ff verder gezocht maar kan de class resize_180_180 niet vinden :(
Als ik mij niet vergis dan moet je dit online toch ook uit de broncode kunnen halen?
http://www.shiftgear.nl/artikel/12/coming-homeleaving-home-bi-module