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/
Related
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
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()) ;
});
});
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.
Links on my website: http://rnmtest.co.uk/oddfellows/
If you hit 'Dine' you should see a 'Book Now' button. This element is not clickable in IE. The area below it has a semi-transparent png as the background. The content is loaded via jQuery.
I have put the anchor within a container div as recommended by other websites, but this has had no effect. If I resize the window in IE8 I can sometime click a small portion of the button.
This effect occurs on all anchors, not just the images.
This is a known limitation of IE6 - links within a container that use filters to create transparent backgrounds are not clickable
You can find more information and a workaround here
Once you loaded the content from jquery did you hook in the click event?
Did you make sure jquery finished loading the content before you tried to hook the event?
It's very easy to do.
I had to make the link position:relative; explicitly.