Why is my fadeslideshow not showing in IE8? - javascript

I'm hoping someone can help me with this fadeslideshow script. There are many topics from other forums with answers as to why this isn't working of other people but I've tried all their fixes and mine is still not working.
I have no trailing commas, my images on not on my local drive and I have located the proper js file and code. However through this all I have not been able to find out why it is not working in ONLY IE8. It works in ALL the other browsers except this one.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="scripts/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [934, 369], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/banner-home1.jpg"],
["images/banner-home2.jpg"],
["images/banner-home3.jpg"],
["images/banner-home4.jpg"],
["images/banner-home5.jpg"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand"
})
</script>
And this is what I'm calling in my HTML
<div id="fadeshow1"></div>
If anyone can give me advice or ideas as to why this might be happening in IE8 I would appreciate it!

Green Day is right.Change the jquery version to newer version.this will solve your issue.earlier i had same issue.i solved it by changing the version.

Related

Yet again: getting mouse coordinates after click on an image for mobile

After clicking on an image on some point, I want to get the x and y coordinates of that point woth respect to the top left corner of the image.
After googling and stackoverflowing a bit, I find this solution with jquery.
<html>
<script type="text/javascript" src="jquery.js"></script>
<body>
<!-- WEBSITE CONTENT -->
<img src="image.jpg" id="test">
<script>
$(document).ready(function() {
$('#test').click(function(e) {
var offset = $('#test').offset();
var x=e.pageX - offset.left;
var y=e.pageY - offset.top;
alert(x+' '+y);
});
});
</script>
</body>
</html>
Well, this code seems to work very well on non-mobile devices but it has problems on some mobile devices, in the sense that it does not return the right coordinates (at least pageY). On the other hand, even other solutions (based on the use of screenX/Y) seems to have problems on mobile devices.
So, I'm wondering:
1) somebody knows a robust solution working for mobile? Or,
2) somebody knows a workaround to at least detect if the mobile device does not correctly interpret the code above?
Maybe page is scaled.When in windows, it return (2,2) maybe on mobile it return(1,1).

Adding hyperlinks to a javascript image array

I'm having a problem with a java carousel. The code is working fine on my page, but I want to add hyperlinks to the images, but I'm unsure how to achieve this. I've tried a few things, but its just caused the code to stop working, and the carousel to drop off the page.
As I say, its all working fine, but as soon as I alter the default code, it falters.
The code I have so far is:
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Any help is appreciated....
Check out the source here:
http://home.comcast.net/~jscheuer1/side/bgcarousel/demo_linked.htm
Great example. Just add a link into the slide text, and use CSS to style it to the width and height 100% of the slide box.

Issues with simple Isotope example in Safari

I'm thinking of redoing my homepage again and thought to use Isotope to make it spiffier. I've experimented with Isotope in the past and was frustrated by not being able to make it work like I wanted. This time I'm trying to do something simpler. I made a super simple example to illustrate my latest issue. Images do not show in Safari and some other browsers unless you resize the browser window.
Below is a sample of my code, the divs are written to the screen with PHP. I might switch to UL and LI but since the HTML is there just not being displayed until the browser window is resized... Is there some JavaScript force redraw/reload I should be doing, there was nothing about that in the Isotope documentation that I've encountered and the demos work in Safari on my MacBook Pro.
I tried a few other browsers, it works as designed in IE8, but Firefox on my work machine seems to react the same as Safari.
<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
<div class="item"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></div>
</div>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
Have you tried putting your function into Windows.load?
$(window).on('load', function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
I've moved on. I have everything working how I like on www.muschamp.ca now. I didn't really make any changes to Isotope or the JavaScript / CSS though I tried many. The big change I made which finally solved this problem was to use PHP to determine the image's height and width. The Isotope documentation says it will work without this, but in my experience it works far better if you give the JavaScript accurate image dimensions.
I'm not sure how much of a performance hit I take using getimagesize() http://php.net/manual/en/function.getimagesize.php but adding a call to that before writing out my image tag(s) results in perfect rendering every time. I fetch slightly fewer images / RSS feeds as a compromise.
Hopefully my trial and error and simple demo helps some people.

prettyphoto not working

I can't get it working anyone out there can help
I use this in the head
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
I use this for photos
rel="prettyPhoto[pp_gal]"><
I use this before the closing body tag
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true, /* true/false */
allowresize: true, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
});
});
</script>
I linked the prettphoto CSS to my document
What do I do with the jquery.js and the jquery-1.3.2.min.js folders?
Make sure the js and css folders are positioned relative to your current page. For example, if you are working on http://localhost/photogallery/index.html, make sure the 3 folders included with your prettyPhoto download get extracted to http://localhost/photogallery/, and not the root of your server.
Make sure you have the prettyPhoto "images" folder. It includes a number of themes and other resources necessary for prettyPhoto to look right.
A conflicting library or version of jQuery may be stopping prettyPhoto from loading. Try running prettyPhoto on a blank page with just the necessary scripts and CSS included, and a couple image links with rel="prettyPhoto[pp_gal]". If this works, and when you bring the code back in to your page it doesn't work, you can know that something is conflicting on the page with prettyPhoto or jQuery.
Check for any errors on the page. Internet Explorer has the Developer Tools. Firefox has Firebug. Chrome has Developer tools. Search online for how to use the one particular to your favorite browser.
Like Dawson said in his number 4 answer, check to make sure you don't have any javascript errors on your page that would be stopping prettyPhoto from loading correctly.
I was banging my head against my keyboard for 2 hours b/c it wasn't working for me. In Firefox, I used Tools > Web Developer > Error Console to see that I had a JavaScript code from another widget I'm using throwing an error. I commented out that line and it worked correctly.
Check check, and check again.

Continuously scrolling horizontal ticker containing images in jQuery?

I would like to do something like this: http://javascript.about.com/library/blcmarquee1.htm
The script I referenced however seems to be a bit laggy (outdated?), so I was wondering if anyone knew of a better solution. (jQuery solutions welcome.)
Just found this — jQuery-driven, and has images. I’m intending to use it for a current project.
http://logicbox.net/jquery/simplyscroll/
UPDATE: I have now used this in production code. The plugin is capable of looping 70+ 150×65px images pretty smoothly - which a number of another plugin I tried similar to this were failing on.
NOTE it reeked havoc with z-index issues in IE 6 / 7 and was not showing up etc. - But this might also have been partly due to my CSS. To anyone having trouble with it not showing up at all in IE check out the standard IE z-index fixes: http://www.google.com/search?q=ie+z+index+issues
LATEST UPDATE:
Addition things to consider when implementing plug-ins like these:
The number of items and type of content to scroll. I found a number that would start to glitch as soon as you had more than say 15 images to scroll.
I found a number of these plugins that were tied to old versions of jquery
If scrolling images ARE THEY ALL THE SAME SIZE again a number of the plug-ins I experimented with only worked if all the images were the same size but did not make this clear in the tutorials. I believe then the plugins run then set a string of li tags that are all x wide then calculate the total distance of them all chained together to manage the scrolling.
Effects - some would continuously scroll others would move one image pause for a second then move another image
I have now also found these two scroller plugins to be very good as well.
http://caroufredsel.frebsite.nl/
http://sorgalla.com/jcarousel/
The Silky-Smooth jQuery Marquee and Giva Labs' Marquee
Just a thought. Could you do something like this.
<style type="text/css">
.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}
.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}
.inline-image{
display:inline-block;
}
</style>
<script type="text/javascript">
var img;
function imgScroll(){
img = $(".inline-image").first();
img.animate({width:0},2500,'linear',function(){
img.remove();
$(".imgholder").append(img);
imgScroll();
});
}
$(document).ready(function(){
imgScroll();
});
</script>
and the html
<div class="imgwindow">
<div class="imgholder">
<img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
</div>
</div>

Categories