I'm not exactly sure about the correct term of what I'm trying to do. But basically I am trying to set a video or flash.swf file inside a custom shaped border (the boarder isn't a perfect square) in the header of my website.
I've provided two pictures of what I mean. The first picture is what I want the page to look like when it first loads. The second picture is what it should look like after the video or flash.swf file loads.
Notice how in the second picture there is an image that fits inside what I am calling the boarder area. Again I do not know the proper term. Any help would be greatly appreciated as I don't even know where to begin to start.
Image 1 http://i.stack.imgur.com/xHhB6.jpg
Image 2 http://i.stack.imgur.com/gJ77g.jpg
Set the wmode="opaque" in the embed / object tag. Then you can overlay the flash file with a png that is transparent in the area you want the flash visible.
the png must be positioned absolute that you can position it right via top/left and for the z-index.
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I am trying to use the default templates available with CKEDITOR.So I choose the one where an image and text can be placed side by side i.e. the image is occupying a certain part of the editor and the text the remaining part(but on the same horizontal level.I hope you get my point).But when I paste an image into the image area(provided in the template) , the text automatically shifts itself towards the bottom of the image(i.e. now image and text are not on the same level anymore). This happens no matter whether the size of the area provided for the image is bigger or smaller than the image.
Can any one say why this is happening and how to solve it.
You can change the Image Alignment To get the text in the same horizontal level
Image Properties -> Image Info -> Alignment -> Left | Right
The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?
I am doing
<div class="catimgback">
<img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>
Where arguments.width = 163px; arguments.height=163px; and arguments.size = small
If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.
I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.
Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.
What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:
Go to Site Config > Edit Site from the Admin area
Click the Images tab
Towards the bottom, click Add Custom Image Size
Enter a Name (for example, catimg)
Enter the Height
Enter the Width
Click Save (You now have a custom image size that can be used for any content items)
Go to the Site Manager, and add/edit a content item
If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.
Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.
Cheers!
has anyone ever used nivo slider for images? I'm having an issue with showing the next and prev images for the navigation. It shows the prev image for boh next and prev navigation.
can anyone help please?
If you simply copy/pasted the example code, you will notice that it is asking for one image. This is because it's using an image called a sprite. A sprite is an image that has multiple images on it, which then are positioned via CSS via background-position attribute. You can either create your own sprite image and position it with CSS or you can use two different images.
If you'd like to use two images, simply change the left control's image in the CSS to left.png (assuming you have a left arrow icon) and the right control's image in the CSS to right.png.
Image Gallery with overlapping Fade In and Fade Out effects ???
I'm trying to find an idea to go by or some code snippet for an Xml Img. gallery where I can use Images which are fading 'In and Out' before showing the next Img. a type of overlapping, and which than again does the fade In and Out thing.
**** I have been able to get things going through the last week, but I'm not too happy with it as it is not smooth enough!, and not that greatly dissolving between Imgs.
Here is a Link of a gallery which has that what I'm looking for !!!
link text
Thanks a lot in advance. regards aktell
I have not tried this yet.
can you try creating two overlapping canvases.
first image in the first canvas which fades from alpha 1 to 0 and second image fades from 0 to 1. Then second image replaces first one in 1st canvas giving way to third image in second canvas.