I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}
I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}
If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?
Related
I need help with some JS. I need to add rel="lightbox" to the main images of the code below so that these images will open in a lightbox. I grabbed this code from the inspector and this is being generated by a plugin so instead of editing the plugin files I'd like to add the rel code another way. I assume I can add this via JS but nothing I am finding is working. Any help would be appreciated.
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
You need to do something like this:
const imgs = document.querySelectorAll('img.rsImg')
for(let img of imgs){
img.setAttribute('rel', 'lightbox');
}
The code is not tested, but I'm sure it'll guide you.
It looks like all of the images you want are tagged with the class "rsImg".
If this is the case, you can select all images with that class and add the "rel" attribute to them...
document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
.forEach( // for each of the things selected, run the code here
n => n.setAttribute('rel', 'lightbox')
)
The following snippet runs that code, using your html from the question (with the images changed to placeholders) -- after it runs you can use your browser to inspect the element(s) and see that the rel attribute is added to each img.
document.querySelectorAll('img.rsImg').forEach(n => n.setAttribute('rel', 'lightbox'))
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage"
src=" //www.fillmurray.com/1008/1024"
style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears
I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap
I have managed to get this working on android but not on mobiles.
I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.
Js fiddle:
https://jsfiddle.net/49h450g9/
I am using bootstrap and less. My grid HTML code:
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
<h3>image 1</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">
<div class="overlay blue">
<h3>image 2</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
<h3>image 3</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
<h3>image 5</h3>
<hr>
<p><strong>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
<h3>Image 6</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
Solutions I have tried include:
adding
onclick=""
to the image wrap div element
2 adding the JS line to my js file:
$('body').bind('touchstart', function() {});
Adding the following js to my js file:
2 adding the JS line to my js file:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in
I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me
Any help would be massively appreciated :)
Thanks!
use :active pseudo class instead of :hover. In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.
similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.
Javascript newb here. I am trying to make a menu that changes it's image when the button is clicked and active.
Here is the html
<div id="expand_footer">
<div class="footer_btn" id="ftr_btn1">
<img class="shopbtns" src="outerwear_icon.png" width="66" height="87" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn2">
<img class="shopbtns" src="top_icon.png" width="66" height="88" style="padding-top:4px;" />
</div>
<div class="footer_btn" id="ftr_btn3">
<img class="shopbtns" src="bottom_icon.png" width="89" height="91" style="padding-top:1px;" />
</div>
<div class="footer_btn" id="ftr_btn4">
<img class="shopbtns" src="boots_icon.png" width="66" height="80" style="padding-top:10px;" />
</div>
</div>
and the css
.footer_btn {
float:left;
text-align:center;
width:25%; /* percentage of stage to occupy */
margin-top:0px; /*adjust spacing between text and image */
padding:0!important;
cursor:pointer;
z-index: 405!important;
}
I'm switching from AS3 to JS so apologize if the question seems silly. Would the best way to accomplish this just be in CSS or can Javascript handle this. I'm not using Jquery. (avoiding the library load) I am using GSAP so perhaps there is a way with that or? Thanks in advance for any assistance.
Can you possibly use background-image and selector?
.footer_btn {
//Your css
}
.footer_btn:hover {
background-image: url('image.jpg');
}
I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.
I have those pictures
<img class=img src='a' />
<img class=img src='b' />
<img class=img src='c' />
<img class=img src='d' />
<img class=img src='e' />
And this button
<button id=presstostart>PRESS ME TO START</button>
I want once the button is clicked start showing the pictures one by one, a,b,c,d,e with an interval of 2 seconds amongst them.In JQuery.No plugins....
There are many slider plugins you can use. But personally I would recommend flexslider and nivoslider. They're easy to use and customize. You can also find attributes to set animation speed, pause time, slide direction, etc.
I found an example in this url
http://www.jssor.com/development/index.html
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
You will have to download the js library from the link above, and instead of on ready you could assign the event to a click of a button.
yet another example...
http://jsfiddle.net/7WL6P/200/