[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 11, 9:35 am, Mike Alsup [EMAIL PROTECTED] wrote:
For some reason var index = $
(this).parent().children().index(this); returns -1 and it appears to
be stuck in the onAfter method.
Hmm. Try this instead:
function onAfter(curr, next, opts) {
var index = opts.currSlide;
};- Hide quoted text -
- Show quoted text -
That is working just fine without any errors in both FF 2 and IE 7,
strange. Thanks!
Do you have a paypal link? If not email me privately if possible from
this group.
Again, Thanks!
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Hi Mike, After several tests for some reason FF doesn't like the onAfter and stops working for me after changing values in the select list and getting new image data. For some reason var index = $ (this).parent().children().index(this); returns -1 and it appears to be stuck in the onAfter method. Any Ideas? Thank You.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Hi Mike, Have you been able to reproduce a similar error using php and FF? Maybe you could try with an empty container like me and load the slides with some data from the server, very similar to your add6 example. Thank You!
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 10, 10:02 am, Mike Alsup [EMAIL PROTECTED] wrote: Have you been able to reproduce a similar error using php and FF? Maybe you could try with an empty container like me and load the slides with some data from the server, very similar to your add6 example. You need to make this a little easier for me, I don't have time to write all the code needed to simulate your situation. Please post a public demo somewhere that shows the problem. Thanks. I would put up a public demo if I could, but I can't or I would lose my job. You already have 90% of the code required in your add6 example and the JS code I posted, the only thing is you don't need to do the fancy prev/next shiftAndPop with the array because in my JS the images are loaded all at once using the data from the server, when a valid value in the dropdown is selected. The only code you would have to write is some php method to take in a parameter to give you the images data array for the selected value in the dropdown. Would it help if I donated some money to your project? I probably can donate $50.00 US dollars. Do you have a paypal link on your site anywhere?
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 10, 11:50 am, Mike Alsup [EMAIL PROTECTED] wrote: The only code you would have to write is some php method to take in a parameter to give you the images data array for the selected value in the dropdown. http://jquery.malsup.com/cycle/sets.html 1) Starts with an empty slideshow 2) Binds change event on select element 3) Loads slideshow data based on selected value in select element 4) Uses prev/next navigation To make a long story short I found the problem but I don't know why it is a problem, if you look at the javascript I posted in the cycle method I set the startingslide to 0 when I remove that the problem is gone.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 10, 12:52 pm, OutOfTouch [EMAIL PROTECTED] wrote: On Nov 10, 11:50 am, Mike Alsup [EMAIL PROTECTED] wrote: The only code you would have to write is some php method to take in a parameter to give you the images data array for the selected value in the dropdown. http://jquery.malsup.com/cycle/sets.html 1) Starts with an empty slideshow 2) Binds change event on select element 3) Loads slideshow data based on selected value in select element 4) Uses prev/next navigation To make a long story short I found the problem but I don't know why it is a problem, if you look at the javascript I posted in the cycle method I set the startingslide to 0 when I remove that the problem is gone. It is eithier that or the onafter that is causing a problem, sorry I had them both removed and the problem went away, dang I need to have the onafter.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
It is definately the onAfter that FF doesn't like in this scenario.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
I just noticed that I still need to hide everything and return false
when the Please Select a Value is chosen in the dropdown.
The bug I am seeing in FF though is going back and forth between two
real values where I get real images loaded.
JavaScript:
var length;
var mailPieceGroups;
var slidesAdded = false;
var myFancySelector = '#' + myControlId; --- This is something
special I have to do because ASP.Net renames control id's with a
unique name under certain circumstances. Anyways myControlId is the if
of my dropdown and is defined in a script block in the head section of
my page.
$(document).ready(function() {
$('#nav').hide();
$('#output').hide();
//$('#ddlAdFundSelection').change(function(){
$(myFancySelector).change(function(){
var selectedValue;
var myDataToSend;
url: ../MyStaticPage.aspx/GetMailPieceGroupsByAdFundTypeId,
selectedValue = $(myFancySelector).val();
//TODO: If selectedVal = NA then hide stuff and return false.
myDataToSend = {'adFundTypeId':' + selectedValue + '}
$.ajax({
type: POST,
url: ../Orders/Orders.aspx/
GetMailPieceGroupsByAdFundTypeId,
data: myDataToSend,
contentType: application/json; charset=utf-8,
dataType: json,
//error: function(XMLHttpRequest, textStatus,
errorThrown) {alert(textStatus);alert(errorThrown); this;},
success: function(data, textStatus){mailPieceGroups = eval('('
+ data + ')'); startSlideShow(mailPieceGroups); }
});
function startSlideShow(mailPieceGroups)
{
var html = '';
var $slideshow = $('#slideshow').cycle('stop').empty();
length = mailPieceGroups.length;
for (i = 0; i length; i++)
{
//alert(mailPieceGroups[i].FileName);
html = 'a href=' +
mailPieceGroups[i].OrderFormUrl + ' id=orderFormUrl' + i +
'img src=../Images/'+ mailPieceGroups[i].FileName + '
id=mailPieceImg' + i +
' width=345 height=245 //a';
$slideshow.append(html);
}
$('#nav').show();
$('#slideshow').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
next: '#next',
prev: '#prev' ,
startingSlide: 0,
after: onAfter
});
function onAfter()
{
var index = $(this).parent().children().index(this);
$('#output').show();
//alert(index);
$('#description').text(mailPieceGroups[index].Description);
$('#priceInfo').text(mailPieceGroups[index].PriceDescription);
};
}; // End StartSlideShow
//alert(myDataToSend);
}); // End Changed Function
});
If I post it all it will just add to the confusion so here is the
relevant html.
HTML:
p class=teaser style=text-align:center;
strong
Click on the image for the mail piece group you want
to order.nbsp;
/strong
/p
div id=nav class=nav
a id=prev href=#Prev/a
a id=next href=#Next/a
/div
div id=slideshow class=pics
/div
br /
br /
div id=output
p id=descriptionDescription Goes Here/p
p id=priceInfoPrice Goes Here/p
p(SomeMoreText Here)/p
/div
Thanks for your help.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Mike, I just wanted to say thanks for all your help again. Everything works great in IE7, but in FF for some reason the next and prev buttons stop functioniong after awhile 1) Page loads no images in containing div 2) Select a value from drop down get json data from server, stop cycle, load images into containing div and start cycle. FF works fine here when clicking next or prev 3) Select a diff value in dropdown , get json data from server, stop cycle, load images into containing div and start cycle., then click next or prev and it goes the next image and then stops working. --Any ideas what might be different in FF? Thanks
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 7, 6:10 pm, OutOfTouch [EMAIL PROTECTED] wrote: Mike, I just wanted to say thanks for all your help again. Everything works great in IE7, but in FF for some reason the next and prev buttons stop functioniong after awhile 1) Page loads no images in containing div 2) Select a value from drop down get json data from server, stop cycle, load images into containing div and start cycle. FF works fine here when clicking next or prev 3) Select a diff value in dropdown , get json data from server, stop cycle, load images into containing div and start cycle., then click next or prev and it goes the next image and then stops working. --Any ideas what might be different in FF? Thanks I forgot to mention that I hide the containing div when nothing is loaded as well as the nav container. Then I show it in step2 maybe FF doesn't like me calling show everytime when it is already showing?
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 7, 6:42 pm, Mike Alsup [EMAIL PROTECTED] wrote: I forgot to mention that I hide the containing div when nothing is loaded as well as the nav container. Then I show it in step2 maybe FF doesn't like me calling show everytime when it is already showing? Can you post a link? It's an internal site on an intranet, so I can't but i could post the javascript code and my html source. I can post it tommorrow.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Ok I am actually trying stuff now and can't get the onBefore to fire.
Here is what I decided to do:
When the selected value in a dropdown changes I make an ajax call and
get JSON data back.
And load all the images at once, no images are prexsting in the
markup.
Here is my JavaScript.
$('#nav2').hide();
$('#ddlAdFundSelection').change(function(){
var selectedValue;
var myDataToSend;
selectedValue = $('#ddlAdFundSelection').val();
myDataToSend = {'adFundTypeId':' + selectedValue + '}
$.ajax({
type: POST,
url: Default.aspx/GetMailPieceGroupsByAdFundTypeId,
data: myDataToSend,
contentType: application/json; charset=utf-8,
dataType: json,
success: function(data, textStatus){var mailPieceGroups = eval('(' +
data + ')'); startSlideShow(data); }
});
function startSlideShow(data)
{
var html = '';
var $slideshow2 = $('#slideshow2').cycle('stop').empty();
mailPieceGroups = eval('(' + data + ')');
length = mailPieceGroups.length;
$('#nav2').show();
$('#slideshow2').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2' ,
before: onBefore
});
function onBefore(curr, next, opts)
{
// make sure we don't call addSlide before it is
defined
if (!opts.addSlide || slidesAdded){return;}
for (i = 0; i length; i++)
{
html = 'a href=' + mailPieceGroups[i].OrderFormUrl + '
id=orderFormUrl' + i +
'img src=Images/'+ mailPieceGroups[i].FileName + '
id=mailPieceImg' + i +
' width=200 height=200 //a';
opts.addSlide(html);
alert(html);
}
slidesAdded = true;
};
}; // End StartSlideShow
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Looks to me like '#slideshow' is empty when you call cycle. That is not allowed.- Hide quoted text - - Show quoted text - Yep that was it so I guess I will have to append the images before .cycle is called. And use the onAfter to set my description text when the next or prev is clicked. Is there a way to get the index of the image in the after method? Thanks Mike I almost finished.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Is there a way to get the index of the image in the after method? View source on this page to see how to get the index: http://www.malsup.com/jquery/cycle/after.html Perfect thanks!
[jQuery] Hide/Show in IE 6
Will this work in IE 6?
$('#listings').show();
I can't remember for sure but I thought that didn't work in IE 6.
Thanks!
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Can I clear out what was previously loaded, so the only the selected
category is being viewed?
Yes. Stop the slideshow, empty it, reload it, and then restart it.
var $slideshow = $('#slideshow').cycle('stop').empty();
$slideshow.append( mySlide1);
$slideshow.append( mySlide2);
etc...
$slideshow.cycle();
Mike, If I call var $slideshow = $
('#slideshow').cycle('stop').empty(); when it is not running and is
empty will it error out?
Thanks!
[jQuery] Re: Hide/Show in IE 6
Thanks, I will try it.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 4, 5:59 am, Mike Alsup [EMAIL PROTECTED] wrote: Thanks for the help with the change event hookup and the new example. Can I have no slides preloaded and just load them on the fly? No, when you call cycle there must be at least two slides in the container. Can I still load the image but not cycle if there is only one image and also hide the prev/next buttons?
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
On Nov 4, 10:08 am, Mike Alsup [EMAIL PROTECTED] wrote: Can I still load the image but not cycle if there is only one image and also hide the prev/next buttons? Sure. I just mean that cycle will not function with only a single slide. You can manipulate the DOM however you choose, but when you finally decide to call cycle there should be at least two slides in the DOM. Awesome, thanks. Can I also use prepend or addslides to add something like this: 'a href=1img src='+slides.pop()+' //a'
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Hi Mike, Thanks for the help with the change event hookup and the new example. Can I have no slides preloaded and just load them on the fly? I have dropdown where users will choose what category they want to view images from that will make an ajax call to get the images for the selected category. I am also planning to show text for each image and wrap each image in an anchor tag, so that when the image is clicked they will go to a differrent page within my website depending on the image clicked. Can I clear out what was previously loaded, so the only the selected category is being viewed? Again thanks for all your help.
[jQuery] How to load only one image at a time using JQuery Cycle Plugin?
Hi, I am looking for some help on how to only have one image at a time in the page using an ajax call to get the images, or get all images using ajax, but when next or prev navs are clicked to only load the next or previous image by cycling thru a JavaScript array. Loading alot of images at once could be a performace problem slowing down the page load. I have dropdown that will be used to make a selection on what type of images to view, this will make an ajax call using Jquery to go get the data from the DB, FileName, description and so on. Then I would like to put the results into a JavaScript Array if possible, and show the first imagefile by it's file name in the array, then when prev or next is clicked keep track of the index, and load a single image at a time? Maybe I am mistaken but this example looks to me like it would eventually load all images into the page, what if you had a 100 images? http://malsup.com/jquery/cycle/add2.html http://malsup.com/jquery/cycle/add3.html http://malsup.com/jquery/cycle/add4.html I am noob with Jquery, thanks for the help!
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
No, the add2 demo shows a way to fetch one image at a time. Cycle provides the hooks to do whatever you need to do. There are before/ after callbacks and there is an addSlide method on the options object which is passed into them. But it's up to you to determine the best approach for your particular needs. The demo pages are there to give you ideas and to show how the options and callbacks can be used. Mike Hi Mike, The plugin is very nice and one of the best out there. The note says that two slides must be present in a slideshow, also the example nulls out after all slides have been loaded. I am assuming that stops the adding of slides. How can I make this work with the next and prev button? Would I still need to null it out? Can I have no img tags preloaded into the containing div and use the next and previous buttons to load 1 img tag using 0 as the starting index, then from there just change the src property based on the index? So I would never have more then 1 slide tag in the containing div. TotalSlideCount will change when the dropdown selection changes I don't understand this line: var currentImageNum = parseInt(next.src.match(/beach(\d)/)[1]); The part I don't get is /beach, this looks like cycle is doing some regex stuff.
[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?
Hi Mike, A couple more questions. I know this off topic but I am searching for in the Jquery documentation how to hook into the selection changed of a dropdownlist to implement my ajax call, if you could point me in the right direction I would be much appreciative. Where can I view the api documentation for the Cycle plugin? What do before and after callbacks do? -- Sorry I am noob with JQuery. OnBefore would be executed before animation and OnAfter would occur after animation. is that correct? Thanks!
