several @koken pulse snippets

caption_overlay_and_arrows_together

  <style type="text/css">
		.pulse_overlay { padding: 10px; opacity: .5; background: #000; color: #fff; text-align: right; position: absolute; font-size: 11px; }
	  	.pulse-arrow { position: absolute; top: 50%; margin-top: -52px; z-index: 1000; font-size: 70px; color: #fff; cursor: pointer; opacity: .75; font-weight: bold; }
		.pulse-left { left: 10px; }
		.pulse-right { right: 10px; }
	</style>
	<script>

		(function() {
			var leftArr = $('<div class="pulse-left pulse-arrow" data-action="next" />').html('&lang;'),
				rightArr = $('<div class="pulse-right pulse-arrow" data-action="previous" />').html('&rang;'),
				arrowSelector = '.pulse-left, .pulse-right',
				currentItem;

			var checkMousePos = function(e) {
				var container = currentItem.find('img').parent(),
					offset = container.offset();
				if (e.clientX < offset.left || e.clientX > container.width() + offset.left || e.clientY < offset.top || e.clientY > container.height() + offset.top) {
					cleanUpArrows();
				}
			}

			var setupHandler = function() {
				$(document)
					.off('.pulseArrows')
					.on('click.pulseArrows', arrowSelector, function(e) {
						lastMousePos = {
							clientX: e.clientX,
							clientY: e.clientY
						}
						pulse[$(this).data('action')]();
					});
			}

			var addArrow = function(which) {
				cleanUpArrows();
				if (which === 'left') {
					this.append(leftArr);
				} else {
					this.append(rightArr);
				}
				setupHandler();
			}

			var cleanUpArrows = function() {
				$(arrowSelector).remove();
			}

		  	var overlay = $('<div class="pulse_overlay" />');

			pulse.on('contentmouseover', function(e) {
				e.dom.append(
					overlay
						.empty()
						.width( e.dom.find('img').width() - 20 )
						.height( e.dom.find('img').height() - 20 )
						.css({ left: e.dom.find('img').parent().get(0).style.left, top: e.dom.find('img').parent().get(0).style.top })
						.append(e.data.caption || e.data.title || e.data.filename)
						.on('mouseout', function() { $(this).remove(); })
				);
			});

			pulse.on('transitionend', function(e) {
				cleanUpArrows();
				currentItem = e.dom;
			});

			pulse.on('contentmousemove', function(e) {
				if (!e.dom) { return false; }
				if (e.cursor.percentageX > 50 && !$('.pulse-right').length) {
					addArrow.call(e.dom.find('img').parent(), 'right');
				} else if (e.cursor.percentageX < 50 && !$('.pulse-left').length) {
					addArrow.call(e.dom.find('img').parent(), 'left');
				}
			});

			$(document)
				.on('mousemove', pulse.context, function(e) {
					if (currentItem) { checkMousePos(e); }
				})
				.on('mousemove', '.pulse_overlay', function(e) {
					var xPerc = currentItem.find('img').parent().width()/2;
					if (e.clientX < xPerc + currentItem.find('img').parent().offset().left) {
						addArrow.call(currentItem.find('img').parent(), 'left');
					} else {
						addArrow.call(currentItem.find('img').parent(), 'right');
					}
				});
		})();

	</script>

caption_overlay_for_pulse

<style type="text/css">
  	.pulse_overlay { padding: 10px; opacity: .5; background: #000; color: #fff; text-align: right; position: absolute; font-size: 11px; }
	</style>
	<script>

		(function() {
		  	var overlay = $('<div class="pulse_overlay" />');

			pulse.on('contentmouseover', function(e) {
				e.dom.append(
					overlay
						.empty()
						.width( e.dom.find('img').width() - 20 )
						.height( e.dom.find('img').height() - 20 )
						.css({ left: e.dom.find('img').parent().get(0).style.left, top: e.dom.find('img').parent().get(0).style.top })
						.append(e.data.caption || e.data.title || e.data.filename)
						.on('mouseout', function() { $(this).remove(); })
				);
			});
		})();

	</script>

previous_next_arrows_for_pulse

<style type="text/css">
  	.pulse-arrow { position: absolute; top: 50%; margin-top: -52px; z-index: 1000; font-size: 70px; color: #fff; cursor: pointer; opacity: .75; font-weight: bold; }
		.pulse-left { left: 10px; }
		.pulse-right { right: 10px; }
	</style>
	<script>

		(function() {
			var leftArr = $('<div class="pulse-left pulse-arrow" data-action="next" />').html('&lang;'),
				rightArr = $('<div class="pulse-right pulse-arrow" data-action="previous" />').html('&rang;'),
				arrowSelector = '.pulse-left, .pulse-right',
				currentItem;

			var checkMousePos = function(e) {
				var container = currentItem.find('img').parent(),
					offset = container.offset();
				if (e.clientX < offset.left || e.clientX > container.width() + offset.left || e.clientY < offset.top || e.clientY > container.height() + offset.top) {
					cleanUpArrows();
				}
			}

			var setupHandler = function() {
				$(document)
					.off('.pulseArrows')
					.on('click.pulseArrows', arrowSelector, function(e) {
						lastMousePos = {
							clientX: e.clientX,
							clientY: e.clientY
						}
						pulse[$(this).data('action')]();
					});
			}

			var addArrow = function(which) {
				cleanUpArrows();
				if (which === 'left') {
					this.append(leftArr);
				} else {
					this.append(rightArr);
				}
				setupHandler();
			}

			var cleanUpArrows = function() {
				$(arrowSelector).remove();
			}

			pulse.on('transitionend', function(e) {
				cleanUpArrows();
				currentItem = e.dom;
			});

			pulse.on('contentmousemove', function(e) {
				if (!e.dom) { return false; }
				if (e.cursor.percentageX > 50 && !$('.pulse-right').length) {
					addArrow.call(e.dom.find('img').parent(), 'right');
				} else if (e.cursor.percentageX < 50 && !$('.pulse-left').length) {
					addArrow.call(e.dom.find('img').parent(), 'left');
				}
			});

			$(document).on('mousemove', pulse.context, function(e) {
				if (currentItem) { checkMousePos(e); }
			});
		})();

	</script>