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.
Related
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.
I'm trying to display images instead of nodes using Cytoscape.js to create a network diagram, but I haven't had any success yet. I started with the Images and breadthfirst example (https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5), but there are a couple key things I would like to change.
For starters, I'd like to display an image only instead of a node. The above example displays a circle node with an image inside it. Is there any way to make the node completely transparent, and just let the image show through? I just want to see my vector icon images. When I delete all style properties for my node selector except width and height, I still see a circle constraining my image. I just want to see my image.
Next, I'd like to use something on the element data to decide what image to use instead of the #nodeId mechanism in the example above.
.selector('#order-db')
.css({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
Using a unique selector for each id is not very scalable or easy to modify. I'd prefer a declarative approach where a property on the data element determines which image to display. I tried using the "classes" property on an element, and I added a "shape-database" value to it. Here is how the class is defined...
.shape-database {
width: 95px;
height: 95px;
/*background: url('images/network-icons.jpg') 0px -95px;*/
background: url('images/database-5-med.png');
}
I then tested that the "shape-database" class was working by adding a simple div to the page, and the class is working properly on a normal div. The cyto node I added the classes property to does not display the background image. It's as if the class was not applied to the node, or else the node is blocking the image somehow. This is with the exact same code I was using above, with all the node selector css properties removed except width and height, and the #order-db css selector removed. I just see a grey circle for the node.
When the classes property on the element didn't work, I even tried the following to no avail...
cy.$('#order-db').addClass('shape-database');
Any thoughts on what I'm doing wrong? A link to an example displaying just images instead of nodes would help as well.
Displaying an image instead of a node:
The key here was in hiding the node background and border completely, so that the background image alone shows through. The key to accomplishing that is through "background-opacity" and "border-opacity" (or "border-width") on the style objects. I added an image property (value is an img src) to the data object for each element that I wanted to swap out with an image, as well as the following style.
{
selector: 'node[image]',
style: {
'background-image': 'data(image)', // specify some image
'background-opacity': 0, // do not show the bg colour
'border-width': 0, // no border that would increase node size
'background-clip': 'none' // let image go beyond node shape (also better performance)
}
}
This also satisfied my requirement to use the element data to designate which elements are to be replaced with images and which images to use, instead of hard-coding a unique style and image for each element id.
I never got the classes data property to have any effect whatsoever on the background-image of a node. Perhaps there's a bug there.
Hopefully, this will help someone in the future because it was not obvious to me that background-opacity etc. made the entire node invisible. From the documentation, it sounded like it affected the node's background. Knowing that I was altering the background image for the node caused me quite a bit of confusion around nodes and backgrounds. I'm still quite fuzzy on all the layers and how they interact, but the above works and is better in my opinion than the image example given on the cytoscape site.
I have a button on which I set the background image using css, and then sometimes need to change it dynamically in the code. But if I change it, I see both images, one on top of the other.
Here's my css:
ExpertVideoButton{
cn1-derive: Label;
background-image: url(images/play-video.png);
cn1-source-dpi: 180;
cn1-background-type: cn1-image-scaled-fit;
}
And my code:
mStateMachine.findViewVideoBtn(f).getAllStyles().setBgImage(mStateMachine.res.getImage("no_video.png"));
The previous background image doesn't get replaced by the new one. Any ideas on how to solve this?
Update
The original background image wasn't actually being set from the css - there was a css style that was unused, and the image was being set from the code, twice. The first time I had made it the Label's icon, and the second time its background image. Unfortunately, this was a case of me having trouble reading my own code!
Since you use transparent images you need to set the bgTransparency of the style to transparent (0) in the CSS (not sure how you do it there).
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.
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.