I have three stacked images that I rotate through using Dojo fadeIn and fadeOut and a timer. Only the href for the last one is ever available. Is it possible to rotate the href as well?
<div id="main-slideshow">
<img src="images/catalog/WRP21Aug10_0014.jpg" />
<img src="images/catalog/WRP21Aug10_0015.jpg"/>
<img src="images/catalog/WRP21Aug10_0017.jpg"/>
</div>
Here's the CSS for it:
#main-slideshow
{
width: 300;
height: 400;
position: relative;
}
#main-slideshow img
{
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I tried changing the z-index, but that doesn't appear to work. It's my first Javascript module using Dojo so I could have miss-coded something.
Would suggest fading in/out the entire tag. Or even wrap them in three divs and fade them instead.
You could also rewrite the script to change the href attribute, but that would probably just complicate things. Hope that helps!
Related
I am building a website and on the landing page I have a couple of images with a javascript interaction. These are being brought by javascript instead of html and they are on an .img on css.
``` img{position: absolute; top: 500px; left: 400px; transform: translate(-50%, -50%) scale(0.2); animation: fadein 0.5s;} ```
On the second page of the website I have more images but I have put them together as grid with Responsive equal height images using CSS.
.img {width: 100%; height: auto; vertical-align: middle;}
My problem is that the second page is using the .img attributes from the first page and not the second one and I am not sure how to differentiate them?
Here's a picture of how the left page should be looking vs how it's looking.
picture of what should be looking vs how it's looking
I am really running on a tight deadline but I can't seem to fix this, does anybody know what could I do? :(
Thank you so much!
The img selector is too vague, it will target any img on the page. You should make it more specific.
You have to create a different CSS class for each case.
The problem is you are using img { } in CSS. This is fine for when you want all the images to be styled the same way, however you want separate styling for separate images. To overcome this we use selectors.
Use a class. A class selector will only style tags that have class="" in them, in this case <img> tags
img.page1 {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%) scale(0.2);
animation: fadein 0.5s;
}
img.page2 {
width: 100%;
height: auto;
vertical-align: middle;
}
Now if you add class="page1" and class="page2" respectively to your images and/or containers, the images will use the CSS formating for their own class.
Something like this <img class="page1" src="my_image.jpg">
Or <div class="page1"> (<img> tags here...) </div> will also work and will save you putting the class for each <img> tag
I'm making a web-page that is full of GIF images. Is there any way to make my website to load faster? Like load the GIF one by one or just play the GIF on hover and if there is a way may I know how to do it?
You can make a hover effect to show these images using CSS transitions. When you hover over the H1 tag, the image will display.
HTML
<h2>Fade in Overlay</h2>
<div class="container">
<h1>Show Image</h1>
<div class="overlay">
<img src="http://via.placeholder.com/500x500" alt="Avatar" class="image"
</div>
</div>
CSS:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
You could first of all try compressing the GIFs somehow first and seeing if that would improve your webpage load times.
If the page is holding several dozens of animated GIFs, my recommendation is to load them in chunks. Five at a time, ten at a time maybe. If you load them one by one, users may get annoyed that only one would be showing at a time, load all of them at once the user will get annoyed that any of them wouldn't be loading fast enough. You need to work with a combination of both.
I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!
I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.
I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.
Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.
do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.