JavaScript array show10 images then next 10 - javascript

I need some help with some logic. I have a JSon feed with 600 images. I want to show the first 10 pictures. When the user gets to the tenth picture, if there are more pictures in the array show the next 10 images. I already tweaked json to give me just 10 images but I am not sure how to get the next 10 items in the array. I knowthis hassomething to do with a counter but its all not connecting for me. Any suggestions, pseudeo code,links or code is apprecaited.
Thank you

There are two approaches I can think of to load the content.
Create DOM with all the photos and show only first 10. Hide the rest. Show next 10 once you hit the visible 10th item.
Keep the reference to JSON object Render only first 10. On hitting the 10th hide current 10 n show next 10.
You haven't mentioned if you want to scroll horizontally or vertically.
Create 2 divs with parent having width fixed and child div containing a target images with huge width
You can see an example at http://jsfiddle.net/ch4nd4n/LS7VV/4/ this may not be exactly what you want but you can get the idea.
HTML structure
<div style="width:500px;overflow:hidden;height:255px;position:relative">
<div id="images" style="width:40000px;position:absolute;"></div>
</div>​
JavaScript part that you need to fire onload or post body load.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60474555#N00&lang=en-us&jsoncallback=?", {
format: "json"
}, function(data) {
var str = "";
$.each(data.items, function(i, item) {
str += ("<img src='" + item.media.m + "'/>");
});
$("#images").append(str);
$("#images").find("img").click(function() {
// Add check to animate only if clicked image is not the center of parent div
$('#images').animate({
left: '-=200'
}, 500);
});
});​

It is just pseudeo in java script. Just analyse the loop.
Just start collecting images from Json feed into array container. As you get 10 images, display them with function and clean the container. Keep on doing till all images are over.
Show the last few images which are less than ten by calling function again.
I couldn't give exact code becuase, json feed structure is now known.
var jsonFeed={...};
var counter=0;
var setOfTenImages=[];
for(i=0;i<jsonFeed.length;i++){
if(counter==10){
showTenImages(setOfTenImages); // call function to display Ten Images
setOfTenImages=[]; // clean all container of Ten images which are displayed.
}
setOfTenImages[counter++]=jsonFeed[i].image;
}
showTenImages(setOfTenImages); // Last remaining few images which are less than ten.

Related

Scroll to specific item in the list and then scroll to next specific item in the list

I am working on web-based app (using Javascript , Jquery , html, css) which simply when key down it would scroll those channels , since the number of channel is bigger than height of screen , i have to use scroll functionality when reaches every 10 channels down or up, i use scrollTop method for this purposes.
so let me simplify my question like this (if somebody answer this question , it helps me to reach my actual goal)
I have list of elements and i know how can i scroll to specific element in the list , but my goal is after the first scroll to item 8th , seTimeout and then scroll to the next specific element (item 14th) of the list. I know how can i scroll to the first specific element but i don't know after Timeout how can i scroll to the next specific element (item 14th).
here is the code for scrolling first element which works fine:
`http://jsfiddle.net/xY7tx/2339/`
base on above code which works , i have tried to add following code , my goal is first it would scroll to item 8 and then 3 second timeout then it would scroll to 14th item (which wouldn't) , please somebody tell me how can i fix that, here is the second code which is not work as desire:
`http://jsfiddle.net/xY7tx/2338/`
Thanks!
You can create array with all position you want use and after timeout remove first element of Array
var container = $('div'),
scrollTo = new Array($('#row_8'),$("#row_10"),$("#row_14"),$("#row_2"));
container.scrollTop(
scrollTo[0].offset().top - container.offset().top + container.scrollTop()
);
scrollTo.shift();
var refreshIntervalId = setInterval(function(){
if(scrollTo.length!=0){
container.scrollTop(
scrollTo[0].offset().top - container.offset().top + container.scrollTop()
);
scrollTo.shift();
}else{
clearInterval(refreshIntervalId);
}
},3000);
EDIT
Add check if array is empty stop interval
Example

I need my JQuery slideshow to change div content on reload

Hello again my JS saviors! I have another dilema:: I have a div titled "homebanner" that contains text and a background image. My client decided that he wanted the #homebanner to change on reload with 4 images/slides.
So, I did this to change the background::
JS CODE
jQuery(function($){
$('#homebanner').css({backgroundColor: "#fff"});
var totalCount = 4;
var num = Math.ceil( Math.random() * totalCount );
function setBGImage() {
var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
$('#homebanner').css(
{
backgroundImage:"url("+bgimage+")",
});
}
setBGImage();
});
And it works great! So I'm stoked about that. But I can't figure out a way to have specific headline text to correspond with each image. Is this possible? Also, here's a link to the test site http://www.bwpcommunications.com/TESTING/. As you can see, when you refresh the page the image changes but the text does not.
Any help would be awesome!
Thanks,
Shadna
put whatever headline text options you want into an array
var hText = ["blue jeans", "red jeans", "ripped jeans", "plaid"];
then right after setting the background image, you can use the num variable to pick the corresponding text from the array (or if you want it random you can just do the random number generation again). Then it's just a matter of setting the text on the page.
$('#htxt').html(hText[num]);
or in plain javascript:
document.getElementById('htxt').innerHTML = hText[num];
depending how the images are numbered, you might need to do num - 1 since the array is 0 indexed.

prettyPhoto multiple galleries on one page

I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate.
I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16
then gallery 1/16 etc.
I was told to edit this line of script in my raw.js file:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
but nor sure what to do it with it? Any help would be greatly appreciated.
Here is a link to the page in question:
http://www.tetra-shed.co.uk/news/
prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.
What you really want is the first sixteen in gallery 1;
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
And the next 16 in gallery 2;
$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');
The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example
<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
So you would want to assign that unique gallery id as the pretty photo rel value. ie;
$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');
I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;
Finding the id of a parent div using Jquery
I've not tested it or anything but something like this should get you going in the right direction;
$('#content').find('.gallery-icon a').each(function() {
var gallid = $(this).closest("div").attr("id");
$(this).attr('rel', 'prettyPhoto['+ gallid +']');
});
I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.
$(document).ready(function(){
$.each($(".gallery"), function(i, val) {
var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
$(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
});
});
All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"
in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)
and the next to "prettyPhoto[gallery2]" and so on.

Javascript - changing image won't work unless i alert()

I'm building a JavaScript based poker game that get some updates from a server via Ajax.
when player are in "show down" each one of them supposed to show what card he holds,
I'm changing the pictures of each showdown hand (from blank card to an actual card i.e King of spades img)
I have the weirdest problem: when i change the images (as shown in the code below),
the images wont change from blanks to actual cards, they remain "blank.png".
whats weird is if i remove the "//" from line9 (and get an alert message) the cards are shown with their actual image i.e "Ace of spades.png"..
what's with that?!
function executeShowDown(){
(...)
var playerCard1Id = "#player"+(playerNum)+"card1"; //the specific image id for hole card #1
var playerCard2Id = "#player"+(playerNum)+"card2"; //the specific image id for hole card #2
var card1 = "res/images/cards/"+handArr[0]+".png";
var card2 = "res/images/cards/"+handArr[1]+".png";
$(playerCard1Id).attr("src", card1);
$(playerCard2Id).attr("src", card2);
$(playerCard1Id).css('visibility','visible');
$(playerCard2Id).css('visibility','visible');
//alert("endShowDown"); ##### LINE 9 #####
return;
}
This might be happening too fast. Maybe add something to make it wait for 1 second or so, or you could use a callback function, I see you use return there so maybe the other function where you call this from does not wait for it to end.
Good luck!

Animate an element to an unknown location in the document

I have something like a message div that will contain some info of sorts.
I need to animate this text to somewhere else on the DOM, the thing is, I don't know where exactly (in offsets) the text starts from or needs to be animated to.
Take a look at this and you'll see what I mean, The order of the divs won't necessarily be in this order
Also the size of the log div will get bigger as more messages come and I need it to animate to the exact spot that the text will end up.
Not sure if that's what you're after:
$(document).ready(function() {
var dx=$('#message').offset().left;
var dy=$('#message').offset().top;
var ox=$('#log').offset().left;
var oy=$('#log').offset().top;
$("#log")
.css({"position": "absolute","left":ox+"px", "top":oy+"px"})
.animate({"top":dy+"px","left":dx+"px"}, 500, function() {
$('#message').text($(this).text());
});
});
fiddle -> http://jsfiddle.net/KhVuS/9/

Categories