I use Fancybox3 to display some images and I want to place a text on top of an image. This works when i edit the javascript file with this:
test
With this I have text on the actual image. But this text is big when Fancybox zooms the image in and out. Why is this happening and is there a way to solve this?
I want a simple image download text on the image instead of below the image.
You can use .fancybox-is-scaling class name to hide your text while image is zooming, similarly to this demo - https://codepen.io/fancyapps/pen/ePYNZo.
The script uses CSS transform: scale() for zooming to improve performance, but the side-effect is that everything scales withing the container.
Related
I have some high-res images in a gallery on my site, and all I want some sort of animation like what can be found at ajaxload.info, to display in place of my image until it is fully loaded. Some its suggest its as simple as adding something like this to your css:
img { background:url('../images/ajax-loader.gif') center center no-repeat;}
Well for one this adds this background image to my transparent 'spacer.gif' resulting in the loading image showing up where my spacer is. However this 'method' doesn't even work to begin with. When I view the high-res images they still load from top to bottom, and I don't even see the loader.gif. Any help? I thought there was information on this everywhere, but for the life of me I can't find it.
just give all the high res images a class and then in the css use the class name instead of the global img tag to have the background set to.
If you use jquery to load the images then the images won't load from the top down but will only appear when it's fully loaded, so the background loader image will be visible and once the image has fully loaded and is displayed the loader will be covered. This method works pefectly as it's so simple, you were probably just missing something out.
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.
I am having an image button as I have attached here. The respective code I use for this image button is
<asp:ImageButton ID="imgbtn_GenerateRpt" runat="server" ImageUrl="~/images/report.gif" Enabled="false" CssClass="imageButton"
onclick="imgbtn_GenerateRpt_Click"/>
css class
.imageButton![enter image description here][1]
{
position:relative;
top:5px;![enter image description here][2]
}
The text within this image button is "Generate Report". I want a custom text "Acknowledge" to appear inside this image button instead of "generate Report" text.
How can i achieve this without using any image editing tools like photoshop or coreldraw?
Any help on this?
If the image itself has text in it, then there really isn't any way around creating a brand new image.
Depending on the shape of the image you could possibly overlay a <div> element with its background color set the same as the image, but at that point you would simply be wasting your time.
Download Paint.Net for free and spend about 5 minutes creating a new image.
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.
I need to know how do I get the menu where the background depends upon the text entered. As in the image, the background gets expended irrespective of the text in the menu item. Also the sides of the background image should not get distorted.The image is here.
I still tend to use the sliding doors technique for this kind of thing.
http://www.alistapart.com/articles/slidingdoors/
Although there is probably a newer and more elegant solution these days.