At my whits end with trying to get jquery cycle to play nice with IE and pngs. I know its the opacity issue but I just can't tweak it.Can someone please suggest a better solution for my slideshow? Check the link below to see what I have now. i would like something similar that is also clean.http://vismarkgroup.com/dev/vision/
View 3 Replies
I have to do a slideshow with images of different widths... am using cycle plugin, which I like very much... I have a little test slideshow here, http:[url]....it's not centering imgs in containing div (I made div width of widest image.. this will work for my situation, in which imgs will be hard-coded..)if you inspect img element in firebug (#slideshow img), it shows that the plugin adds a style of position: absolute; top: 0px; left: 0px .to the img; why does the plugin do this.. how can I center the images in containing div...
View 1 Replies View RelatedIīve just launch my website-portfolio, well itīs not yet the final version but it is almost and despite I am satisfied with the final result Iīve detected a really strange bug that only happens sometimes. The thing is when the first introduction Slide appears (the one with the hand-made drawings), sometimes the images shrink from the normal size to small tiny images. This doesnīt happen always and if you refresh the page it disappears.
Follow the link to the page were the bug happens - [url]. I'm using jquery cycle plugin, check it out.
I can click the next button and go forward until it reaches the last slide then it sticks. The Back button is also broken. This code works great with 1.3.1 and 1.2.6 but has the aforementioned bugs in 1.3.2....
$(document).ready(function() {
var fadeSpeed = 1000;
var currentSlide = 0;
var setSeconds = 1200;
[Code]....
In the past few days I've been trying to make this script work but why the following script works on IE but not on other browsers? It seems that IE waits for the <img> tags to load in the #slideshow and then starts the slideshow. The other browsers seem to load the slideshow while the XML parser is trying to load img tags. It only shows the first image and doesn't do anything else. What could cause this? I tried delay(), load(), ready().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="demoStyleSheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
</head><body> .....
Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): [url]
I constructed the slideshow:[url]
...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit).
I have a Nivo slider that works fine on this page.
Slideshow page.
But it fails when I load it into this page using jQuery's .load function
Project List
(Click on any of the project links to load the content)
Might it be a conflict between nivo slider and the jquery script that controls the open/close and loading the content? Here's that code: [URL]
Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails):
[URL]
I constructed the slideshow:
[URL]
...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit).
I have a jquery slideshow on a webpage. It works fine. No problem. how I could load the images by an XML file?
The code is:
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
[Code].....
I have preloaded the images i want to use into an array and want to cycle thruindefinitely each image in the array, and use the each function on the array. The array isvar imgs = [];
I have a div such as this
<div id="mydiv"></div>
& with current styling such as this -
#mydiv{
background-image: url(myimg.jpg);
[Code]....
only the last image shows up... I am going around the bend ( turning green, red, and face rgb (255,255,255)
I found a jquery image slideshow script but the images have no links to them. When I manually add the links to the image urls, these work only in IE - when I click next, the picture updates and is linked to the correct URL. In other browsers (Firefox, Chrome..), the last url becomes the clickable link for all the images. I have tried to use the .wrap option and I'm sure I'm on the right track, except I have 4 images and I want it to go to 4 different urls.it sought of works, but only the first url is picked up and becomes the link for all the images.How can I get the link reference for the url to iterate with the original loop of the image?
View 2 Replies View RelatedI am having an issue with my slideshow images not always loading correctly and instead displaying just a thumbnail of the image. If I reload the page the image works correctly [code]...
View 1 Replies View RelatedI am using jQuery with a Brightpearl website, except on one of our pages, (edit your address book page), the slideshow images, instead of fading one into the other as it should, decide to tile over the top of the page and don't fade at all. The input boxes show through, but not the submit button, so it renders the page useless.
View 2 Replies View RelatedMy problem here is that I recently implemented a javascript slideshow for my page, but it only seems to work on Firefox and not on any other browser (such as IE and Safari).
Here's the page code...
Could anyone take a peek and see what's going on?
I wanted to start my research on the topic of slideshows here and ask if anyone knows what's the best method for creating a slideshow that should have the ability to display images and videos (and bookmark them)? It can be a plug-in, but this is for a client so it has to be okay for commercial use (and free).It should also be able to support other content like ads and polls/questionaires, in the form of a div. Also HTML 5 compatible with all the cross-browser compatibility one would expect.
View 4 Replies View RelatedI'm creating a slider with the Cycle plugin and ran into a little bit of a road block.
What I want to do is simply have anchor links on my slideshow images, which I can get working just fine, except that when I add these anchor links, it removes my image caption (which worked prior to adding anchors on my images)
[Code]...
I've built this webpage : [URL]. Now, I want the slideshows (Jquery Cycle) to have a pager to navigate the images instead of previous and next [URL].
My code looks like this :
function ajaxpage(url, containerid) {
var $container= $('#' + containerid);
$container.hide().load(url, function() {
$container.fadeIn();
$('.slideshow')
.cycle({
next: '#next2',
prev: '#prev2',
fx: 'blindX', speed:'1500',
timeout: 0, .....
after: function() {
var alt = $(this).attr('alt');
// do something with alt text
$('#someElement').html(alt);
}});
});}
The code I need to implement looks like this :
$
('#slideshow'
).before('<ulid="nav">'
).cycle({fx:'turnDown'
,speed:'fast'
,timeout:0
,pager:'#nav'
,//callbackfnthatcreatesathumbnailtouseaspageranchor
pagerAnchorBuilder:function
(idx,slide){return
'<li><ahref="#"><imgsrc="'
+slide.src+'"width="50"height="50"/></a></li>'
;}});
How to do this successfully?
I'm developing a website and I am using a slideshow done in jquery which works fine on all pages expect the gallery page.On the gallery page I am using Lightbox2 but as soon as I add the js files to this page the slideshow stop working and only shows one image.
View 4 Replies View RelatedAs stated my code works in Chrome but that's it. In IE and FF there are no errors but it only shows about 1/3 of the slide show and cuts the rest off. code...
I'm sure this is just a simple adjustment in width and height somewhere but I can't figure it out. Like I said, I have no errors I just can't get it to look like I want it. If I left anything out that is needed to troubleshoot this problem
I am looking to build a slideshow (basic, with next/previous options, e.g jquery cycle) but I would like it to get the images from a specific folder. So, whenever I want the slideshow updated, I would simply drop the files in a folder and that would do it.
Would this require a php script? If yes, direct me to somewhere to find out more...Or if there are other ways.
I'm new to jquery and am experimenting with implementing it into my existing work. I've got the cycle plugin working pretty well, only the 'turnDown' transition I want to use only appears to work on images. All other transitions seem to work fine with both content and images. I've done loads of searches on this but can't find anything specifically related to this...
Below is a link to where I'm at with it - the first 2 transitions are images and work as expected, giving that 'squashed' look as they slide in and out. The next 2 are divs, with an image, heading, and a paragraph inside - they seem to just 'drop' out which has a completely different effect and not what I want [URL]. Is there something in the plugin code itself I can tweak to make this happen, or is this particular transition intended for just images?
SlidShow to show more than 6 images at a time. Here is the development link: [URL] - there are 12 pictures but only 6 are showing there. Same with [URL] where is the setting to expand it to show ALL images I specify, not just the first 6?
View 24 Replies View RelatedI have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:
[URL]
which is an example of increment loading slideshow working fine! javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.
Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):
<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
[Code].....
Okay, so I've been trying to pick up JavaScript and JQuery. And I have a few questions, would be very grateful for answers: -If I'm making a sliding image gallery with JQuery, how do I store my images in an array? I take it this is the best way? I've made a JQuery gallery by assigning each image an ID, and hiding the ones that aren't required. This looks like bad practice though.
I take it it should work with a standard JavaScript array, then reference the position of the image I've loaded? like [0][1][2] etc, but something must be amiss in my code. So basically, I've animated my image in, and there's a next button that I want to take me to the next image in the sequence.
only 4 changes to make and your ready to go! Faster than naming all your pictures one by one in an array. You just need to name your pictures 001.jpg, 002.jpg and so on...
<!-------------- Begin Slideshow ------------------->
<!-- change the path and name of your first image -->
<!-- if your images don't all have the same size, just leave out the width and height-->
<img src="../images/005.jpg" width="640" height="480" name="photoslider">
<form method="POST" name="rotater">
<H6 ALIGN="center">
<script language="JavaScript1.1">
//from 005.jpg to 018.jpg, change to yours.
var begin=5
var end = 18
var which = begin;
function geturl(n){
n = String(༼' + n);
//change "../images/" to your path
return '../images/' + (n).substring(n.length - 3, n.length) + '.jpg'
}
//do not edit after this point
function backward(){
if (which>begin){
window.status=''
which--
document.images.photoslider.src=geturl(which);
}
}
function forward(){
if (which<end){
which++
document.images.photoslider.src=geturl(which);
}
else window.status='End of gallery'
}
</script>
<input type="button" value="<< Backward" name="B2"
onClick="backward()"> <input type="button" value="Forward >>" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=begin+1; backward();return false>Start over</a></h6><br>
</form>
<!---------------------------- End of slideshow ----------------------->
I want to store my images in a folder images/slideshow/1.jpg for all my images up to 10.jpg. I have tried to adjust the code so i can store the images in a folder but the code cant find the images.
I have this code in the head section:
<script type="text/javascript">
thisImg=1;
imgCt=10;
function newSlide(direction) {
thisImg = thisImg + direction;
if(thisImg <1) {thisImg = imgCt;}
[Code]...
