Created
May 9, 2011 10:50
-
-
Save thejeshgn/962355 to your computer and use it in GitHub Desktop.
IRIN News - Embeddable Photo Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Put | |
slideshow.html | |
s3Slider.js | |
on a web folder, then use iframe to embed where ever you want | |
<iframe src=" path to slideshow.html" width="320" height="220" frameborder="0" scrolling="no" /></iframe> | |
This can be used as embed code anywhere on the web. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<!-- STEP 1: put this div content where you want the picture to appear --> | |
<!-- start --> | |
<div id="pictureDiv" width="300px"> | |
<em><span id="pictureHeaderId"></span></em> | |
<span id="pictureContentId"></span> | |
</div> | |
<!-- end --> | |
</body> | |
<!-- STEP 2: Add these script lines at the end of the page after body tag --> | |
<!-- start --> | |
<script> | |
function processResultPics(pics){ | |
document.getElementById("pictureContentId").innerHTML = pics["responseData"]["feed"]["entries"][0]["content"]; | |
document.getElementById("pictureHeaderId").innerHTML = pics["responseData"]["feed"]["entries"][0]["title"]; | |
} | |
</script> | |
<script src="https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://irinnews.org/photo.xml&callback=processResultPics"></script> | |
<!-- end --> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------------------------------------------------------------ | |
s3Slider | |
Developped By: Boban Karišik -> http://www.serie3.info/ | |
CSS Help: Mészáros Róbert -> http://www.perspectived.com/ | |
Version: 1.0 | |
Copyright: Feel free to redistribute the script/modify it, as | |
long as you leave my infos at the top. | |
------------------------------------------------------------------------- */ | |
(function($){ | |
$.fn.s3Slider = function(vars) { | |
var element = this; | |
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; | |
var current = null; | |
var timeOutFn = null; | |
var faderStat = true; | |
var mOver = false; | |
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); | |
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); | |
items.each(function(i) { | |
$(items[i]).mouseover(function() { | |
mOver = true; | |
}); | |
$(items[i]).mouseout(function() { | |
mOver = false; | |
fadeElement(true); | |
}); | |
}); | |
var fadeElement = function(isMouseOut) { | |
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; | |
thisTimeOut = (faderStat) ? 10 : thisTimeOut; | |
if(items.length > 0) { | |
timeOutFn = setTimeout(makeSlider, thisTimeOut); | |
} else { | |
console.log("Poof.."); | |
} | |
} | |
var makeSlider = function() { | |
current = (current != null) ? current : items[(items.length-1)]; | |
var currNo = jQuery.inArray(current, items) + 1 | |
currNo = (currNo == items.length) ? 0 : (currNo - 1); | |
var newMargin = $(element).width() * currNo; | |
if(faderStat == true) { | |
if(!mOver) { | |
$(items[currNo]).fadeIn((timeOut/6), function() { | |
if($(itemsSpan[currNo]).css('bottom') == 0) { | |
$(itemsSpan[currNo]).slideUp((timeOut/6), function() { | |
faderStat = false; | |
current = items[currNo]; | |
if(!mOver) { | |
fadeElement(false); | |
} | |
}); | |
} else { | |
$(itemsSpan[currNo]).slideDown((timeOut/6), function() { | |
faderStat = false; | |
current = items[currNo]; | |
if(!mOver) { | |
fadeElement(false); | |
} | |
}); | |
} | |
}); | |
} | |
} else { | |
if(!mOver) { | |
if($(itemsSpan[currNo]).css('bottom') == 0) { | |
$(itemsSpan[currNo]).slideDown((timeOut/6), function() { | |
$(items[currNo]).fadeOut((timeOut/6), function() { | |
faderStat = true; | |
current = items[(currNo+1)]; | |
if(!mOver) { | |
fadeElement(false); | |
} | |
}); | |
}); | |
} else { | |
$(itemsSpan[currNo]).slideUp((timeOut/6), function() { | |
$(items[currNo]).fadeOut((timeOut/6), function() { | |
faderStat = true; | |
current = items[(currNo+1)]; | |
if(!mOver) { | |
fadeElement(false); | |
} | |
}); | |
}); | |
} | |
} | |
} | |
} | |
makeSlider(); | |
}; | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>s3Slider jQuery plugin</title> | |
<!-- CSS --> | |
<style type="text/css" media="screen"> | |
#slider { | |
width: 300px; /* important to be same as image width */ | |
height: 200px; /* important to be same as image height */ | |
position: relative; /* important */ | |
overflow: hidden; /* important */ | |
} | |
#sliderContent { | |
width: 300px; /* important to be same as image width or wider */ | |
position: absolute; | |
top: 0; | |
margin-left: 0; | |
} | |
.sliderImage { | |
float: left; | |
position: relative; | |
display: none; | |
} | |
.sliderImage span { | |
position: absolute; | |
font: 10px/15px Arial, Helvetica, sans-serif; | |
padding: 10px 13px; | |
width: 300px; | |
background-color: #000; | |
filter: alpha(opacity=70); | |
-moz-opacity: 0.7; | |
-khtml-opacity: 0.7; | |
opacity: 0.7; | |
color: #fff; | |
display: none; | |
} | |
.clear { | |
clear: both; | |
} | |
.sliderImage span strong { | |
font-size: 11px; | |
} | |
.top { | |
top: 0; | |
left: 0; | |
} | |
.bottom { | |
bottom: 0; | |
left: 0; | |
} | |
ul { list-style-type: none;} | |
</style> | |
<!-- JavaScripts--> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
<script type="text/javascript" src="s3Slider.js"></script> | |
</head> | |
<body> | |
<div id="slider"> | |
<ul id="sliderContent"> | |
</ul> | |
</div> | |
<!-- // slider --> | |
</body> | |
<!-- start --> | |
<script> | |
function processResultPics(pics){ | |
var all = ""; | |
for(i=0; i<pics["responseData"]["feed"]["entries"].length; i++){ | |
var content = "<li class=\"sliderImage\">"; | |
content = content+ pics["responseData"]["feed"]["entries"][i]["content"]; | |
var spanContent="<span class=\"top\"><strong>"+pics["responseData"]["feed"]["entries"][i]["title"] +"</strong></span>"; | |
content = content+ spanContent; | |
content = content+ "</li>"; | |
all = all+content; | |
} | |
all = all + " <div class=\"clear sliderImage\"></div>"; | |
document.getElementById("sliderContent").innerHTML = all; | |
$('#slider').s3Slider({ | |
timeOut: 3000 | |
}); | |
} | |
</script> | |
<script src="https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://irinnews.org/photo.xml&callback=processResultPics"></script> | |
<!-- end --> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment