I'm using featherlight gallery to display a bunch of images in a lightbox. Everything works amazingly, I would just like to change the style of the arrows.
Reading the docs, I see that I can easily change the icon of the arrows with any character, but i don't understand how to change other style elements.
For example, I would like to make the arrows black instead of white and fix them, not just make them appear on hover.
So far I have an ugly solution where I use js to change the style attributes, like so
document.getElementsByClassName("featherlight-next")[0].getElementsByTagName("span")[0].style.color="black";
I'm a begginer with js, jquery, html and css, but I guess there must be a more elegant and practical solution.
I cannot change featherlight css since I'm loading it on the go from here:
cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.gallery.min.js
Related
I have a text div and several buttons that I would like the text to smoothly fade in and out when changing and/or hiding.
From checking Google and Stack Overflow, most of the answers suggest applying a CSS class of hide, then toggling that class while using a custom function to wait half a second before changing the text so the timing is perfect when the other text fades back in.
But I've read that can have problems with text that has span tags which mine have, and several people have also suggested there may be some plug-ins to simplify the process.
I can't find one, but is there a better method or a plug-in to handle this without replacing all of my code that updates text with custom functions?
I don't mind doing that if it's the only way, it just seems like there's likely a better/more intuitive option?
About your statement:
I have a text div and several buttons that I would like the text to
smoothly fade in and out when changing and/or hiding.
Fade in / And Fade out can be achieved via CSS itself, or with Javascript or if you are using a JQuery library with that also. And text within buttons will not create any issues at all.
In Pure CSS you may require only two properties:
transition and opacity to be used in proper way.
This link can be helpful from CSStricks https://css-tricks.com/almanac/properties/t/transition/
In JQuery there you have fadeIn() and fadeOut() functions which takes care of all the CSS internally and you only have to call these.
You may check this resource from W3Schools
https://www.w3schools.com/jquery/eff_fadein.asp
And Lastly even in pure Javascript the same can be achieved, depending on the requirement you have.
Edit:
tl;dr What I have is a .png file of a horizontal bar and a .png file of a square button. I want to be able to add both images to a webpage and be able to slide the button along the rectangle. I know that it is possible to make range sliders in better ways but using the .png files is a hard requirement.
I have been tasked with taking an image of a range slider, adding it to a webpage, and make the slider interactive/draggable. I know that jQuery has its own sliders (https://jqueryui.com/slider/#multiple-vertical) but this does not seem to apply if you want to use an image of the range slider instead.
Example Image:
(source: dcrazed.com)
How can this be implemented? All the tutorials I see make the slider out of HTML/CSS/JS elements while I have separate images of the slider and draggable button.
FYI, the reason we're using an image is that it looks better than the standard sliders jQuery provides.
It may help if you search for "Form Range Input" or "RangeSlider JS" instead of slider to find a tutorial.
However I don't see any reason why this can't be accomplished more easily and more cleanly strictly through JS and CSS.
If you're having trouble visualising, try breaking your design into parts like so and save yourself the hassle of trying to make an image based design responsive. (Like we all have struggled with previously)
The slider knob itself is a rounded square with three squares inside it.
The slider bar is a rounded rectangle with another three squares placed inside it.
The information box is a div with text and a CSS triangle affixed to it.
The ticks themselves are trickier and will need to be added and removed dynamically with JS depending on their resolution, but their visual details only really need basic styling
If you still feel the need to use images and break the responsiveness of your website then have a look through some Codepens and see what others have done with similar requirements.
I am trying to make the CSS animation for the Menu. Here I want to make the menu as shown in the image. My question is how to write the menu text like in this sample image and make onclick event for each text? The Onclick event might use the CSS #Keyframes (For making some animations).
I am newbie to the web designing field, and it looks very complex for me.
Use CSS transforms
-webkit-transform:rotate(degrees);
transform:rotate(degrees);
Use it on the whole outer wrapper, so you wont have to do it individually on all the links.
I have installed "Easy Nivo Slider" plugin for WordPress in order to show a slideshow in the heading of the site I'm working on and it seems that the plugin generates things like thumbnail navigation and etc inside the IMG tag with javascript. I have never seen this method before and all the changes (margins, paddings) have no effect even close to what I'd like to get. Basically, what I want is to have a slider with a title and description place and thumbnail navigation (whereas the thumbnail is not the smaller image of it, but another one, custom one, defined in a post's custom fields (I think I can do that myself). All I need is to be able to use CSS however I want it to, because right now the only function that actually responded was the font-size.
You can see the half-done site live at http://work.codera.in/re to get a look at the code and to get a glimpse of how I want to be able to modify it in the end result is here: https://minus.com/lbyerG4OncvwdZ
Why don't you try http://wordpress.org/extend/plugins/simple-nivo-slider/ or http://wordpress.org/extend/plugins/wp-nivo-slider/ . From what i can see here wordpress.org/extend/plugins/easy-nivo-slider/ easy nivo plugin appears to be broken.
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.