I am just wondering if anybody knows of either a wordpress plugin or a stand alone slider that allows html content as thumbnails.
What I mean is that if you take a look here: http://tinyurl.com/pdfu3nn
The jockey on the horse would be the slider image and then the little boxes at the bottom of the image (1-4 with the text) would be the clickable thumbnails.
Any ideas?
Thanks
you could use for example royal slider which is a jquery plugin and there appears to be a wordpress plugin version also. Then you can simply use
$(".html_containing_divs").each(function(i){
$(this).click(function(){
$(".royalSlider").royalSlider('goTo', i);
});
});
or something like that. Anyway I didn´t try Royal Slider yet, but it looks pretty good.
Also there is jquery Cycle plugin which also provides some goTo function: http://jquery.malsup.com/cycle/goto.html
Related
im going to create something like this http://www.photofacefun.com/photoframes/, its creating a new image with frame on it, can i do that with php, jquery, or html? or do i have to use any jquery library? is there any jquery plugin like this? doesnt matter if its a paid or free.
how can i add a frame to an image with php and jquery?
And on the example above, are they using php or another language? java maybe. I really have no idea about this.
thanks..
Here is a demo of a responsive image grid using only HTML and CSS.
You can find the code here as well.
You can remove the titles and paragraphs if you like and can make them behave as links using the http://www.something.com"> attribute.
On the example they are using jquery.
I tried using Mosaic (http://buildinternet.com/project/mosaic/) as a jQuery caption plugin (I need the 'slide up' effect) but this one didn't work for images with different height, and I had to change my html structure.
I also tried Capty (http://iwantaneff.in/repo/plugins/effects-ui/capty/index.html) but this one does not work on images that I load with infinitescroll when I reach the bottom of my page. Because it uses the .hover() function instead of the .on() function.
Where can I find a jQuery caption plugin that supports this?
I used a html5, css3, transition combination
http://jsfiddle.net/hashie5/5p7Jk/
I have just added a google translate in website.And set the default language English.
I have a jquery slider on this page.Now what is happening is that text is shown only when the page reloads in description of images contained in a jquery slider. After changing the language through GOOGLE translate, the text disappears and only images are displayed in the jquery slider.
Can anyone help me out why this is happening.
Thank you in advance.
Google translate injects span tags in the document while translating. jQuery-ui powered widgets such as sliders also use spans for example to represent buttons, graphics and icons. When the page is translated, the spans added by Google translate conflict with those used by jQuery-ui elements, often resulting in broken functionality and appearance.
The solution is to add a notranslate class to the elements that you do not want translated (ref). Example:
<div id="slider" class="notranslate"></div>
$(function() {
$( "#slider" ).slider();
});
I'm currently re-designing my portfolio site & I would like to use the best non-flash method possible to create the following slideshow shown in my layout:
http://oi49.tinypic.com/xeifeq.jpg
I would only have 3 slides or so in the show, and I would like to overlay left/right nav buttons as shown.
So how do I go about this?
There are tons of options. With javascript libraries like jQuery, a lot of animations that needed flash once, can be easily done.
Try googling, jQuery Sliders
Although you could use a pure CSS solution you'd get better browser support by using javascript to animate your slideshow.
There's roughly a billion javascript plugins to do this for you, but here's a good one - http://css-tricks.com/examples/AnythingSlider/
You can tweak the CSS of most plugins to get the overlaying arrow effect you want. The method I would use for this is to set the container for the slideshow to position:relative and then set the arrows to be position:absolute ...so for example the left arrow can now be positioned using top:50% left:0
Good luck!
I'm building a WordPress theme and the site has a background image applied to the body of the document using CSS.
I want to allow the client/admin to be able, through the use of theme options, to upload and change this image. So I was wondering what the best approach would be to dynamically changing the background image either using PHP, JavaScript or jQuery to pull through the image? Thanks guys.
You can use the dropdown box for select a color and do the ajax call on change event of dropddown box like this using jquery
$(document).ready(function(){
$("#colorchange").change(function(){
$("body").css('background',$(this).val()) ;
});
});