I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
Related
I am so stuck, and wondering if I should continue relying on translate3d for scrolling.
I'm building my own custom slider/carousel that can show multiple posters at a time depending on screen size. But when I scroll using my mouse, I get mixed results, if I don't use the buttons, it scrolls using the mouse all the way back and forth just fine, but as soon as I click any of the left/right buttons, the mouse will stop scrolling.
I have a left and right button (absolute.) On each scroll, they scroll a set of items (3 - 5 items) using translate3d(), and they work perfectly fine and as expected.
<div class="container" style="display:flex; position:relative">
<!---- Slider ---->
<div class="slider" style="display:flex;>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<!--- more slides -->
</div>
<!--- buttons on opposite ends of the slider, scrolls using translate3d() --->
<div class="left" style="position:absolute;"></div>
<div class="right" style="position:absolute;"></div>
</div>
The solutions that I have tried to make translate3d work are below.
Force browser to create a new layer by adding Translate3D() to the slider and all of its children,
Reverse container, then reverse slider to undo container's reversal. For this, I tried both transform scale, and flex-direction, but none of them worked 100% of the time. Very mixed results.
Will-change, was happy when I saw this but it didn't work.
A few more hacky methods. But none really worked for me.
My gut is telling me to just go with scrollLeft, or scroll into view, and call it a day. But I heard the performance of translateX is far superior, has this been absolutely confirmed? And are there any fairly recent, adopted alternatives out there that also perform well?
Thanks
In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>
check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/
Using bxslider for a little sliding gallery. I want to show captions, which I realize is built in. But...what I'd also like to do is add a small image to the caption.
This is someone elses fiddle: http://jsfiddle.net/s2L9P/3/
It uses span's to display multiple lines of text in the caption:
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg"/>
<div class="caption1">
<span>Image 1</span><br></br>
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
.
.
.
But if you stick a img tag in, it just displays as text. How can I put images in the caption?
Thanks!
added image with no problem
see this fiddle
<div class="caption1">
<img src="http://png-3.findicons.com/files/icons/861/tweet_my_web/128/single_bird.png" />
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a>
</div>
</div>
I use cycle2 plugin to display a slideshow comprised of some images and another slide show. The inner slideshow's next and prev buttons does not work for some reason(up and down, in the example) although they are properly set IMHO:
data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"
and
<div id="upDiv">
<img src="images/up.png" alt="" />
<p>scroll up</p>
</div>
<div id="downDiv">
<p>to see more scroll down</p>
<img src="images/down.png" alt="" class="outer-slide" />
</div>
How can I make them work?
here is a demo: http://jsfiddle.net/FKU2L/22/
There're a few issues
First, in cycle 2, nested slideshows should look like this:
<div class="cycle-slideshow" data-cycle-slides="> div">
<div><img src="..."/></div>
<div>
<div class="cycle-slideshow inner-slideshow">
<img src="..."/>
<img src="..."/>
</div>
</div>
<div><img src="..."/></div>
</div>
The important things are that the slides should all be the same tag, like img img img or div div div not img div img. So you'll need to wrap your first level of slide imgs inside of divs. Since they are now not img, which is the default, you need to set data-cycle-slides="> div" on the outer slideshow.
In addition, you also need your inner slideshow to be inside of a div as well, like <div><div class="cycle-slideshow inner-slideshow"> instead of just <div class="cycle-slideshow inner-slideshow">. Slideshows can be nested, but not crossing swords.
What's currently happening on your example is that it's running both slideshows together, using the same next and prev buttons for both shows, and ripping the imgs out of the divs. So instead of running 2 nested slideshows, you're running 2 concurrent slideshows, where one happens to be inside of the other, which is a by-product of the slideshows directly touching each other and the first show's slides not being nested in divs.
made a working fiddle: http://jsfiddle.net/filever10/dLQPD/
You can learn more by viewing the source here: http://jquery.malsup.com/cycle2/demo/nested.php