External control and hovering of jQuery UI Carousel 1.0.2 - javascript

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).

Related

how to create a web gallery

I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want

Using Two Different Versions of Modernizr on One Website

I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.

Single Page Web Design w/ Dynamic Navbar

Quite frankly I don't even know how to describe what I'm attempting to do. "Dynamic Navbar" is the best I have come up with.
Basically, I've created a single page website with 4 "pages" (sections) using purely HTML and CSS (as well as jQuery for smoothScroll).
I want the highlighted link on the navbar (the current page) to change when users scroll between pages. I've seen this done before, such as on this site:
http://thinkpixellab.com/
I have little-to-no experience with JavaScript and jQuery and I'm really not sure where to start. If anyone could point me in the right direction I would greatly appreicate it!
What you're looking for is ScrollSpy. It's made for Mootools originally, I think: Scrollspy
Bootstrap have it as a plugin for their framework: Bootstrap Scrollspy
I found a standalone JQuery plugin for it, though not sure how good it is as I haven't used it myself: plugin
Obviously you could write something yourself, but with not much experience of JS/Jquery I reckon you're better off sticking to a plugin or something.

GWT Yui Spotlight Carousel issue

We are trying to use yui carousel in our gwt application. But in gwt sample (spotlight sample) 5 images are showing. But we need only three images if we give three images same functionality is not happening like:
gwt-yui-carousel-googlecode-svn-gwtyuicarousel.spotlight.SpotLight
1.We are not able to click on first and second images?
2.Last and last but one images are not visible?
Can we modify the above mentioned sample to work for three images instead of five? If yes,please let us know.
Help would be appreciated.
I have recently worked on a Carousel for GWT, but i used iScroll Implementation.
Please check the links,
apollo-rvs-appspot_carouselPoc
cubiq_iscroll-4
This carousel can be customized for any number of images. I needed 3 Images on a Single View, so i adjusted in a similar way.

jquery image slideshow with links per image

i'm in search of a simple jquery image flipper/fader, that will cycle through a bunch of images, each of them with it's own link.
the flipper will be used like so: my client wants to display logos of his own clients in succession where each logo will link to the respective website.
i know this can be implemented in flash, but i (and my client) think it would be cool if it's implemented in jquery in such a way that the outgoing links are visible to google. i have seen some jquery plugins and code that implement galleries, but they were either too complex or too simple, anyone got a code snipplet that would do this?
google the cycle plugin

Categories

Resources