PDA

View Full Version : Display Image over another image...



chetan.nellekeri
1 Oct 2013, 3:42 AM
Hi,

I am displaying a group of images in the dataview. For that I am using below tpl and its working fine..
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div class="thumb">',
'<img width="90" height="90" src="{src}" />',
'<br/><span><input type="checkbox" name="Test" value="Test">{caption}</span>',
'</div>',
'</div>',
'</tpl>'
],

In some cases I want to display Image over another image as below
46087
This need logic to display a small icon at the top right of main image..
Is there any way to display it..????????

ettavolt
1 Oct 2013, 10:26 PM
This is pure html/css task. Add some element after image, make it absolutely positioned and hidden by default. Show it on .x-item-over (don't remember exactly) being applied to thumb-wrap.

chetan.nellekeri
6 Oct 2013, 10:04 PM
I have used main image as the background for <div> and icon in <img> with float right and position as relative..
Below is code..



'<tpl for=".">',
'<div class="thumb-wrap">',
'<div class="thumb" style="background-image: url(data:image/jpeg;base64,{imgByteArray}); width:120; height:80">',
'<img width="40" height="30" style="float: right; top:-3px; right: -3px; position:relative;" src="zoomIcon.png"/>',

'</div>',
'</div>',
'</tpl>'