I want to make a slider in my custom wordpress theme (using understrap):
I tried using flexslider, had a problem where i could not target the .slides ul for whatever reason. i edited it in my _theme.scss and also tried in the flexslider.css
Why did it work in the inspector, but not in the css / scss files?
This was the first hurdle. The second is, i dont want to have dots below to see what picture i am viewing, i want to have lines , in the right-middle of the picture which shows on an active state the number of the picture currently viewing, for example picture 1 is viewed, show "1" next to the active line.
as this has become impossible to solve with my current skills i am asking you guys to help me out please.
i would use the bootstrap carousel, too. But i am unsure how to edit the above mentioned css to create the desired outcome.
I do not want to use a wordpress plugin as this limits me probably in my decisions. I cannot do "if active state "1" then write "1" next to the picture" or something like that, if you know what i mean.
sorry for putting it really general but thats all i can provide as i have only the non - working flexslider locally installed.
for instant solution you can use option tree plugin.which make the pictures dynamic with them you can use bootstrap slider.and replace image url option tree plugin code.
Related
right now I'm building a site using Pete R.'s 'onepage-scroll.js' plugin you can find
HERE.
I'm also using Bootstrap and what I want to do is hiding bootraps horizontal nav-bar when on the first 'site' and show it on all the other 'sites' (by sites I mean the different sections this plugin uses). My first idea was to create something like a .hideit css-class and tell jQuery to overwrite it whenever the visible section is not the first, but after trying it for hours I can't find the solution - hope you can help me!
I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/
I got a small problem with my webpage.
http://sabinequardon.dk/Portfolio/#portfolio
When you click on "photography" the gallery shows just fine,
but then when you click on "photoshop" something's wrong.
I've copied the exact same code into the photoshop-section, and used javascript fadeIn & fadeOut to show the dif. content, but it doesn't work.
Javascript here: http://sabinequardon.dk/Portfolio/assets/js/gallery.js
Do i really have to give it different names/classes, and make both css and javascript several times to make it work?
I tried everything, just can't seem to find the mistake.
Thanks!
- Sabine
This plugin is not written to be used in the way, that it can be reused for multiple galleries on one page, and it would need some massive work to enable this functionality for it.
Quickiest and easiest call for you would be just separat Photography and Photoshop into differeent html documents, so the ids will not colide
Best wishes
Marian
Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.