We Keep Coding

Getting images from itunes rss feed and putting the pics in a bxslider

So I am able to get the images of the albums from the itunes rss by using this code:
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
HTML for my slider:
<div class="slider">
<ul class = "bxslider">
</ul>
</div>
I try to append the html by using this code:
$('.bxslider').append("<li><img src = "+image + " height = '100'
width ='100' >" + "</li>");
Jquery for slider:
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
I can get the images into the webpage but not inside the slider. I can see the arrows but I am unable to switch images and can see all of them at once. Im supposed to see them one at a time. I do not know whats going on. Any recommendations would be highly appreciated. Thank you!

I will suggest you to initialize your bxSlider inside $.get Ajax success callback i.e. after all images has been added to DOM (exactly after itunesArray.each() loop).
I think you have not posted the entire code but you can just refer below code and take the idea (this code may not work directly as it is):
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
$('.bxslider').append("<li><img src = "+image + " height = '100' width ='100' >" + "</li>");
});//each loop end
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
});
});

Dynamic content - transitions NOT working

Alright let's see if I can explain this properly.
I am writing my own jQuery photo gallery. It loads the contents of the gallery using AJAX, calling upon a Web Method which returns a string which is an array filled with JSON objects containing data (i.e. the file name and the file path of the image and the file path for the image's thumbnail) on every file in the folder passed to it.
Like 'a so:
$(".Title").click(function (e) {
Populate($(this).text());
function Populate(folder) {
$.ajax({
type: "POST",
url: "Filenames.asmx/GetFiles",
contentType: "application/json; charset=utf-8",
data: '{ "folderName" : "'+folder+'"}',
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
...//more code follows
Anyway, so, we have our OnSuccess() function:
function OnSuccess(response) {
var $thumbs = $('#Gallery_Top .viewPane .thumbPanel');
images = $.parseJSON(response.d);
$thumbs.children().each(function () {
//$(this).animate({ 'width': '0px', 'opacity': '0' }, 500).remove();
$(this).transition({ opacity: 0 }).remove();
});
//make sure the thumb reel resets to its original position
$thumbs.css('left', '0px');
for (var i = 0; i < images.length; i++) {
InsertHTML(images[i].thumbHref);
}
}
So far so good.
In the InsertHTML() function, I have to do a few things...
function InsertHTML(data) {
//create the thumbnail image
var $thumb = $('<img src="' + data + '" alt=""/>');
//set its default class to inactive
$thumb.addClass('inactive');
//bind a function to the thumbnail's click event
$thumb.bind("click", function () {
//make sure we have the current image assigned
//for navigation purposes.
$currentImage = $(this);
//remove the main image from the viewing pane
$('#Gallery_Top .viewPane .mainImage .showImage').children().animate({'opacity':'0'},500,'easeOutSine').remove();
//set all of the thumbnails to inactive
$(this).parent().children().each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).addClass('inactive');
}
});
//set the clicked thumbnail active
$(this).addClass('active');
//get the URL for the related image
var href = data.replace('Thumbs\\', '');
href = href.replace('_thumb', '');
var $image = $('<img src="' + href + '" alt=""/>');
$image.addClass('mainImg');
$('#Gallery_Top .viewPane .mainImage .showImage')
.append($image)
.animate({ 'opacity': '1' }, 500, 'easeInSine');
});
$('#Gallery_Top .viewPane .thumbPanel').append($thumb);
}
Okay, so anyway, what's not working is every transition after the first time I click a thumbnail image. The first time I click a thumbnail, the photo fades in nicely. Ever after that, there's no transition at all.
Been yanking my hair out for about 3 hours trying to figure out a way around.
By the way, here's some CSS.
.mainImg{
display: block;
width: 75%;
height: 75%;
margin: 0 auto;
margin-top: 150px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

EUREKA SUCCESS I DID IT.
It never fails. I beat my head against a wall for three or four hours, trying so hard not to have to come on here and ask, then half an hour after I finally break down and ask a question, I figure it out. It's probably motivation from the shame of not knowing how to do something.
var $image = $('<img src="' + href + '" alt=""/>');
$image.on('load', function () {
$(this).animate({ 'opacity': '1' }, 500, 'easeOutSine');
});
$image.addClass('mainImg');
$image.css('opacity', '0');
$('#Gallery_Top .viewPane .mainImage .showImage').append($image);

Need to remove loop in autoplay background video jquery

I'm new to jquery and I have a video running in the background of a homepage of a website I'm working on.
The video is on autoplay and is looped but I only want it to play once.
I looked online to see how I could remove the loop but could not find any answers.
This is the code:
<script src="https://code.jquery.com/jquery-2.1.3.js"></script><script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
} else {
var banner = $('.sqs-slice-gallery-item > img'),
height = banner.height(),
width = banner.width();
var url = "VIDEO URL HERE";
banner.hide();
$('<video class="bannerVideo" width="' + width + 'px" height="' + height + 'px" autoplay loop><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
adjustBanner($('.bannerVideo'), banner);
$(window, banner).resize(function() {
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 200);
});
}
function adjustBanner (video, banner) {
video.css({
height: banner.css('height'),
width: banner.css('width'),
top: banner.css('top'),
left: banner.css('left'),
position: 'relative',
'object-fit': 'inherit'
});
}
});
</script>
Any help would be greatly appreciated.

Spec here on W3Schools,
The loop attribute is a boolean attribute.
When present, it specifies that the video will start over again, every
time it is finished.
Why don't you just remove the loop attribute in your JQuery code ?
<video class="bannerVideo"autoplay loop> // remove loop
Then it should only play once.

using slick.js for a flickr feed

I'm working on implementing a flickr feed to a page inside of a slick.js slider.
I've been able to load the images into the slider, but the images has varied widths and are displaying a little wonky. each div being created adopts the same width, even if the image inside it is thinner.
See page here: http://abenjamin765.github.io/pushpinevents
html
<div class="slider" style="width:500px; background:#666;">
</div>
JS
$(document).ready(function() {
$('.slider').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true
});
$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647565496672&nsid=127682596#N07&lang=en-us&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i,item) {
var squares = (item.media.m).replace('_m.jpg', '_q.jpg');
var large = (item.media.m).replace('_m.jpg', '_b.jpg');
if(i <= 20){
$('.slider').slickAdd('<div class="slide-img"><img src="' + large + '"/></div>');
}
});
});
});

jquery dropline to hold second when mouse is hover out

Is there a way to get this behavior on this dropline menu?Need second or thrid level to stay active for one second when mouse is hover out from menu items.

To clarify, you're looking for some kind of delayed reaction to the mouse's movement? If so, check out this jQuery hoverintent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html
EDIT: I think you'll need to edit your menu script to replace any instance of .hover with .hoverIntent. I had trouble testing this in jsfiddle, but see if it works:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src:'http://www.odzaci.rs/wp-content/themes/typo/images/down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 300}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
// THIS IS THE PART I REPLACED
var config = {
over: function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
timeout: 1000, // number = milliseconds delay before onMouseOut
out: function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
};
$curobj.hoverIntent( config );
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}