jQuery Tutorials & Plugins » image http://jqueryblog.net Mon, 05 Jul 2010 08:45:57 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Image Captions Generated with CSS and jQuery http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/ http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/#comments Mon, 30 Nov 2009 20:02:54 +0000 Osman Erdoğan http://jqueryblog.net/?p=64

This script have very simple usage;

Usage
Script:

$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this)
				.wrap('<div class="imgcontainer"></div>')
				.after('<div class="caption">'+caption+'</div>');
		}
	);
});

CSS:

.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#fff;
	width:100%;
	opacity:.75;
	filter:alpha(opacity=85);
	color:#000;
	}
.imgcontainer img {display:block;}

HTML:

<img src="images/news1.jpg" class="captioned" alt="" title="jQuery blog News#1" />
<img src="images/news2.jpg" class="captioned" alt="" title="jQuery blog News#2" />

Demo

]]> http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/feed/ 0 jQSlickWrap for Slick Text Wrapping in jQuery http://jqueryblog.net/2009/11/jqslickwrap-for-slick-text-wrapping-in-jquery/ http://jqueryblog.net/2009/11/jqslickwrap-for-slick-text-wrapping-in-jquery/#comments Wed, 25 Nov 2009 08:33:11 +0000 Osman Erdoğan http://jqueryblog.net/?p=62

We all know how to use a float property to float an image around a block of text. But what if you want to wrap content around an image… you know the actual image content itself not the block it takes up?  jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.

arrow[1]

Very very simple usage (:

$('img').slickWrap();

Example :

<html>
    <head>
        <title>jQSlickWrap Demo 1</title>
        <script src="./jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="./jquery.slickwrap.js" type="text/javascript"></script>
        <style type="text/css">
            .wrapReady {
                float: left;
            }
        </style>
        <script type="text/javascript" charset="UTF-8">
            $(document).ready(function(){
                $('.wrapReady').slickWrap();
            });
        </script>
    </head>
    <body>
        <img src="./myImage.jpg" class="wrapReady" />
        <p>Lots of text goes here..</p>
    </body>
</html>

See it in action here!

Download – Website

]]> http://jqueryblog.net/2009/11/jqslickwrap-for-slick-text-wrapping-in-jquery/feed/ 0