Here is a new plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay. You can call the plugin the following way: $(elementID).capslide() You can configure the plugin with the following properties: caption_color: The text color of the caption caption_bgcolor: The ...
Here is a new plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.
You can call the plugin the following way:
$(elementID).capslide()
You can configure the plugin with the following properties:
- caption_color: The text color of the caption
- caption_bgcolor: The background color of the caption
- overlay_bgcolor: The overlay color (tint color)
- border: e.g. ’2px solid #00000′ for a black border, leave empty for no border /li>
- showcaption: Boolean value to show or hide the title of the caption initially
Great work of jQuery tutorials and articles. If you’re interested in seeing some of the newest jQuery tutorials and guides, you can find a list here:
http://www.tutorials99.com
Hi, and thank you so much for this amazing plugin. been trying many others but but I chose yours ;)
I do have 1 little question: i can’t figure out how i can have for example a container of 200px, a picture inside of 100px and the make the hover work on the 200px width
[div container of 200px]
[img width=100px]
Caption
[/div]
I managed to have the caption’s width in 200px but i can display it only when i hover the image of 100px, that means that i have a 50px blank space in the left and right of the image :(
Thanks a lot for your help
nobody can help??? :(
How would you change the border color on hover?
Hi,
I have tried inserting the IE8 piece of code but it does not work (js stops working completely). I copied this from above:
$(‘.overlay’,$this).css(‘filter’,’progid:DXImageTransform.Microsoft.Alpha(opacity=50)’);
and pasted it in its entirety after this line in js.
$(‘.overlay’,$this).css(‘background-color’,o.overlay_bgcolor);
Is there a typo or am I missing something? Any help much appreciated
I solved issue with IE8 script. I had to delete and replace each single quotation.
Hope that helps any others that encounter problem. Works fine in IE8 now.
Great plugin. Thanks
here is the code i use for wordpress in order to count the number of image on my front page from a certain div id
thisOne = document.getElementById(“DIV ID”);
items = thisOne.getElementsByTagName(“img”);
var numberofpic = items.length ;
var i = 1 ;
while (i <= numberofpic) {
$("#capslide_img_cont_" + i).capslide({
caption_color : 'white',
caption_bgcolor : 'black',
overlay_bgcolor : 'black',
showcaption : true
});
i++ ;
}
with that code i dont need to call the plugin for each pic
@barney_nest
Hello
how did you solved the issue of IE? I didn’t understand.. could you please help me out?
How do you install this plugin into WordPress?
Hello!
Great plugin! I have created this in joomla module, it works good. but it shows caption on one image not fo all images.
Any help please?
I have the same problem as Rahul it only displays on the first image that comes from my php loop. The rest are not working thay all refrence the same class. Any chance of a little heads up on this one ?
When you wrap this in it becomes invalid markup. Has anyone found a way around this?
When you wrap this in the “a” attribute it becomes invalid markup, has anyone got around this?
I am having the same problem with the “a” tags, this plugin is great but I wish I knew this before because now I have to remove it and it takes so much work. Can you please find a solution for this?
Hi,
I have done it in my php file of Joomla module like this and it works good. Tutotrial: beginning of php code add this code $i=1; and in the end of caslide_img_cont add this php code like blow capslide_img_cont
and in the end of php code add end tags $i++; like this
This php code create numbers, if change this number code $i=1 one to 10, it will starts from 10 to 11 and … how much file you have like it create numbers from capslide_img_cont10 to capslide_img_cont100 and that works and sorry about my english:D
For anyone having trouble getting this to work on Safari or Chrome like Shazman, here is the solution. Make sure to define the image width and height in the html. So, your image must look something like this:
Not defining the height and width for some reason makes the caption load at the top of the image in Safari and Chrome. Simple fix. Great Plugin!
Sorry, the html didn’t show up. The image must have a size definition like this: width=”294″ height=”217″ within the image tags.
hi. in what part do i edit so that the caption slides up and covers the whole image? thanks.
How do you install this plugin?
Hi there! Great plugin, I love it! But I have one tiny problem. If I do use the same div id for the ic_container class only the first picture/caption will work but the others won’t. I would like to use this inside a wordpress loop so I need this to work or I have to find any other way to automate the id in order to make it work with different posts… Any solution? Thank you very much!