Picking up from this question: Get img thumbnails from Vimeo?
I'm trying to create a page with several vimeo videos on it.
I want to have the videos in the HTML look like this:
<div id='12345678' class='vimeo'></div>
<div id='23423423' class='vimeo'></div>
And then I want the jQuery to populate the divs with an img where the src is the thumbnail from vimeo, and an a which points to the video, and whose text is the title of the video. That is, it should end up like this:
<div id='12345678' class='vimeo'>
<a href='https://vimeo.com/12345678'>
<img src='url-to-thumbnail.jpg' />
Video Title
</a>
</div>
(Indentation added for clarity)
This is my starting point from that other question:
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
$('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
}
});
</script>
<div id="thumb_wrapper"></div>
Try this:-
Assuming the div with id already exists.
success: function(data){
$('<a/>',{
href:data[0].url,
text:data[0].title }).append(
$('<img/>' ,{
src:data[0].thumbnail_large
})
)
.appendTo('#'+data[0].id)
}
If the div with id doesnot exist:-
success: function(data){
$('<a/>',{
href:data[0].url,
text:data[0].title })
.append(
$('<img/>' ,{
src:data[0].thumbnail_large
})
).appendTo($('<div/>',{
id:data[0].id,
class:'vimeo'
}))
.appendTo('.someContainer');
}
Fiddle
Append html to the corresponding div
var vimeo_content="<a>\
<img />\
<span></span>\
</a>";
// on success function
function(){
var vdata = data[0];
var thumbnail_src = vdata.thumbnail_large;
var video_title = vdata.title;
var video_url = vdata.url;
$vimeo_content = $(vimeo_content);
$vimeo_content.find('a').attr('href',url);
$vimeo_content.find('img').attr('src',thumbnail_src);
$vimeo_content.find('span').text(title);
//append to corresponding div
$vimeo_content.appendTo($('div#'+video_id));
}
Related
I have problem passing the result to the another page of blade.php using ajax and laravel,
I have two page,
The first page http://localhost:8000/peoplegallery
http://localhost:8000/peoplegallery_album/ and the id
Scenario:
In the first page, you can see on that page are the list of album
Example.
Album1/ 1
Album2/ 2
Album3/ 3
Example Output. if I click the calgarey album with id of 1 all the images inside of that must send to the peoplegallery_album
So now my page transferred to http://localhost:8000/peoplegallery_album/1
Now the problem after I transferred http://localhost:8000/peoplegallery_album/1, why on response has no result.
I have here my codes on my first page where I list all the albums,
$(document).ready(function(){
$.ajax({
url:'http://localhost:8000/api/peoplegallery',
dataType: "json",
contentType: "application/json",
success:function(response) {
var peoplegallery = response[0].gallery_table;
$.each(peoplegallery, function (index, el) {
var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
var gallery_file = stringify_list_gallery['file'];
var people_gallery_image = '<img src=/storage/' + gallery_file + ' class="d-block w-100">';
var gallery_id = stringify_list_gallery['content_id'];
var gallery_content_title = stringify_list_gallery['content_title'];
var gallery_event_dated = stringify_list_gallery['event_dated'];
var peoplegallery_data;
peoplegallery_data =
'<div class="col-md-4">\
<div class="card" style="margin-left:20px;">\
<img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;">\
<div class="card-body">\
<h5 class="card-tilte">\
'+gallery_content_title+'\
</h5>\
</div>\
<div class="card-footer">\
<small class="text-muted"><i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"></i><i class="far fa-calendar-check"></i> '+gallery_event_dated+'</small>\
</div>\
</div>\
<br><br>\
</div>\
';
$('#list_peoplegallery').append(peoplegallery_data);
});
},
error:function(response) {
console.log(response);
}
});
});
So now I need to create a function, to get the attribute id of album once i clicked that I will pass the ID to my api url. once success the result will send to the peoplegallery_album/1
So this is my codes for that
$(document).ready(function(){
$(document).on('click','.clicked_albums',function(e) {
var album_id= $(this).data('id');
$.ajax({
url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
type:'get',
dataType: "json",
contentType: "application/json",
success:function(response) {
console.log(response);
},
error:function(response) {
console.log(response);
}
});
});
});
My Controller Look likes this,
public function peoplegallery_album($id)
{
$get_title = DB::select('SELECT content_title,event_place,DATE_FORMAT(event_date, "%M %d, %Y") as event_dated FROM content_structure WHERE content_id = ? AND status = ? ',[$id,'Active']);
$get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$id]);
return response()->json(array(['logic_title' => $get_title,'get_image' =>$get_image]));
}
And my api route look this,
Route::get('peoplegallery','api\UserController#peoplegallery');
Route::get('peoplegallery_album/{id}','api\UserController#peoplegallery_album');
I think you should get album id in the first page where you are getting the album
I am creating image elements of load of a page and written the code in AJAX POST jquery method for it. So small icons of image are coming on page. When I click on the image on document.ready(onclick) it must open big in modal pop up but it is not opening.However blank pop up is opening.
loadup.js code
$.ajax({
type: "POST",
url: "php/loadimages_f.php",
dataType : 'json',
success: function (result) {
//alert(result);
if(result==0){
$("#friends_list_insert").after(" No Friends Yet...");
}
else{
for(var i = 0; i < result.length; i++)
{
var PP_PATH;
PP_PATH="php/"+result[i].Photo_URL;
var li_post="<li class='imggalli' style='list-style:none;'><a
href='#' data-toggle='modal' data-target='#myModal2' class='thumbnailimg' title='Image"+i+"'><img src='"+PP_PATH+"' style='margin:2px;width:65px;height:65px;' class='img-responsive' id='img"+i+"'></a></li>";
$("#img_gallery_append").append(li_post);
}
}
}
});
now on page code
// Function for image pop up
$(document).ready(function() {
$('img').on('click', function() {
$("#showImg").empty();
// alert(this.id);
var image = $(this).attr("src");
$("#showImg").append("<img class='img-responsive' src='" + image + "' />")
})
});
What is the problem ? Could anyone help please ? ( Objective is opening the small image on the modal pop up..)
try to correct this
PP_PATH="php/"+result[i].Photo_URL;
with
PP_PATH="php/"+result.d[i].Photo_URL;
because result is object, and you need to catch the data with d
When the user hovers over an image an information box comes up about that image, the information them changes inside the box as I move over another image but when I am over no images the information box stays. I can't close the information box (i.e. tooltips).
JS :
var id;
$(document).ready(function () {
$('a').mouseenter(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
});
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
});
How can I get the information box to disappear on mouse out?
I have tried multiple tests but the box doesn't even appear with them, the last one I tried is in the code above.
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
I am only starting out with javascript, jquery etc. in the last year.
Thank you in advance!!
Here is the php.
<div class="thumbnails">
<?php
$query = mysqli_query($connection, "select * from portfolio");
print "<ul>";
while ($row = mysqli_fetch_assoc($query)) {print "<li><img onClick=preview.src=" . $row['image'] . "name=" . $row['folio_id'] . "src={$row['image']}></td></li>";
}
print "</ul>";
?>
</div>
<!--Folio Information-->
<div id="fillFolio">Project Information</div>
I'm not sure, but try to use :
$('a').onmouseleave(function () {
$("#fillFolio").empty();
}
Hope this helps.
$("a").hover(function(){
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
}, function(){
//im not sure u want to hide or want to just clear your question not clear
$("#fillFolio").empty();
$("#fillFolio").hide();
});
Why not use jQuery hover = (mouseenter + mouseleave)
<script type="text/javascript">
var id;
$(document).ready(function () {
$('a').hover(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
,function () {
id = $(this).empty();
});
</script>
I have this code generate dynamically using php code:-
<div class="mailList" id="M_6">
<div class="mailListHeader" id="H_6">
<img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
Subject: <strong>Test Mail</strong><br>
</div>
<div class="mailListContent" id="C_6">
<div class="closeContent" id="CC_6">Close [x]</div>
<span id="SPAN_6"></span>
</div>
<div class="mailListFooter" id="F_6">
<span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
View Content
</span>
<span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
Successfull-[0] Failed-[4]
</span>
</div>
</div>
Then, user can click View Content or Successfull-[0] Failed-[4] that will make a ajax request than display result in div mailListContent. Below is code for the jquery ajax request:-
$(".mailContentBtn, .mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible")) {
$("#C_"+actualId).hide("slow","swing");
}
$("img#LOADER_"+actualId).show();
if(currentId[0]=="MCBTN") {
var dataString ="action=getMailContentByID&mailID="+actualId;
} else {
var dataString ="action=getMailListByID&mailID="+actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function(html) {
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
}
});
});
The request and the events works fine, the problem is every time user click at View Content or Successfull-[0] Failed-[4] the loading image is not display. As you can see, I give a unique ID for every loading image than only 1 loading image will display on clik. There is no error in inspect code in Google Chrome. How can I solve this?
Thank you.
In your call to $.ajax, change the "async" option to "true". Because in your case, the $.ajax is blocking the ui thread in displaying the loading image as it is executed synchronously.
You have missed:
$(document).ready(function () {
});
try this:
<script>
$(document).ready(function () {
$(".mailContentBtn, .mailListBtn").click(function () {
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if ($("#C_" + actualId).is(":visible"))
$("#C_" + actualId).hide("slow", "swing");
$("img#LOADER_" + actualId).show();
if (currentId[0] == "MCBTN") {
var dataString = "action=getMailContentByID" +
"&mailID=" + actualId;
}
else {
var dataString = "action=getMailListByID" +
"&mailID=" + actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function (html) {
$("#SPAN_" + actualId).empty();
$("#SPAN_" + actualId).append(html);
$("#C_" + actualId).show("slow", "swing");
$("img#LOADER_" + actualId).hide();
}
});
});
})
</script>
I have a few images, like
<img src="unstarred.png" class="unstarred-button" id="unstarred-1" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-2" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-3" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-4" />
Then I bind this function:
$('.unstarred-button').click(function() {
id = $(this).attr('id').replace(/^unstarred-/, '');
url = '/star.php?id=' + id;
$.ajax({
type: 'GET',
url: url
}).done(function() {
// What should be put here?
});
});
Now I don't know how to go forward. I want to change the src attribute of the clicked image in the done() call, but $(this) doesn't return the image clicked for sure, as $(this).attr('id') is undefined according to alert().
Could someone help me out?
That's because this within the context of done doesn't refer to img. You need to save the context in the click event handler:
$('.unstarred-button').click(function() {
var self = $(this);
id = self.attr('id').replace(/^unstarred-/, '');
url = '/star.php?id=' + id;
$.ajax({
type: 'GET',
url: url
}).done(function() {
self.attr('src', 'something.jpg');
});
});
Also, you don't need jQuery to change the src or an id of a DOM element, you can change the attribute directly, i.e., this.src = 'something.jpg or this.id = 'new_id'.
$('.unstarred-button').click(function() {
var that = this;
var id = this.id.replace(/^unstarred-/, '');
var url = '/star.php?id=' + id;
$.ajax({
type: 'GET',
url: url
}).done(function() {
that.src = 'some/new/src.jpg';
});
});