jquery get rel attribute and change it - javascript

Hey guys, I have the following code. It is basically a gallery script and when I mouse over the thumbnail, it will change the a bigger version of the thumbnail:
$.fn.CloudZoom = function (options) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch (e) {}
this.each(function () {
var relOpts, opts;
eval('var a = {' + $(this).attr('rel') + '}');
relOpts = a;
if ($(this).is('.image')) {
$(this).css({
'position': 'relative',
'display': 'block'
});
$('img', $(this)).css({
'display': 'block'
});
if ($(this).parent().attr('id') != 'imageBox') {
$(this).wrap('<div id="imageBox"></div>');
}
opts = $.extend({}, $.fn.CloudZoom.defaults, options);
opts = $.extend({}, opts, relOpts);
$(this).data('zoom', new CloudZoom($(this), opts));
} else if ($(this).is('.thumbs')) {
opts = $.extend({}, relOpts, options);
$(this).data('relOpts', opts);
$(this).bind('mouseenter click', $(this), function (event) {
var data = event.data.data('relOpts');
$('#' + 'mainImage').data('zoom').destroy();
$('#' + 'mainImage').attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
$('#' + 'mainImage' + ' img').attr('src', data.thumby);
$('#' + 'mainImage').CloudZoom();
return false;
});
}
});
return this;
};
The html reads as follows:
<li>
<a href="gfx/boss_black.jpg" class="thumbs" rel="thumby:'gfx/boss_black.jpg'">
<img src="gfx/boss-black-small.jpg">
</a>
</li>
What I want to do is to write the rel="" tag without the "thumby".
I want the rel tag look like this:
rel="gfx/boss_black.jpg"
When I do this, the JS doesn't work anymore. How do I change the JS to simply get the "rel"?

var img = $('#' + 'mainImage' + ' img'),
rel = img.parent().attr('rel'),
thumby = rel.substr(8, rel.length - 9);
img.attr('src', thumby);
I would recommend storing the alternative src attribute in an attribute other than rel though. A HTML5 data attribute would be a good candidate.
Also, that is a bizarre selector :)

If I understand correctly - there is a library called thumby that requires a special format for your rel tag that you do not want in your source.
I can see two possible soultions.
Try to execute the javascript that changes the rel tag before the thumby library is included. Javascript loads and executes in the order specified in your HTML document. Hopefully thumby will pick up the changed value, but the source html contains the old value.
Modify the thumby library - specifically the part that reads from rel, and maybe make it identify where to operate based on the class thumbs instead.

Something like:
<li>
<a href="gfx/boss_black.jpg" class="thumbs">
<img src="gfx/boss-black-small.jpg" rel="gfx/boss_black.jpg">
</a>
</li>
...
$('.thumbs img').hover(
function () {
var r = $(this).attr('rel'), a = $(this).attr('src');
$(this).attr({'rel':a,'src':r});
},
function () {
var r = $(this).attr('rel'), a = $(this).attr('src');
$(this).attr({'rel':a,'src':r});
}
);

Related

Using jQuery to foreach iframe src and get ID and action via functions

I'm new to jQuery and JS. How can I rewrite these functions correctly using jQuery? I know it's standard JS which was working fine with the manual HTML markup but I now also need to go through page and find iframes with YouTube src and take ID and then recreate them with the first example markup.
I'm totally stuck. I think I have it more or less, but not sure where to go to now.
Fiddle: https://jsfiddle.net/yurt5bb6/
First example uses my markup:
<div class="video-container">
<div class="video-player" data-id="Cv_2mp3X868"></div>
</div>
Which works as I need, however I think now I need to foreach on load and create that same markup from iframe embeds the functions should be better.
Attempt:
function createThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function createIframe() {
var iframe = $("iframe");
iframe.attr("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.attr("frameborder", "0");
iframe.attr("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
$(document).ready(function() {
// build video from default markup
var defaultVideo = $(".video-player");
$(defaultVideo).each(function (index, value){
var p = $('<div></div>');
p.innerHTML = createThumb(v[n].dataset.id);
p.onclick = createIframe;
v[n].appendChild(p);
});
// search for social embeds and recreate to our markup
$('iframe[src*="youtube.com"]').each(function() {
var loadedVideoURL = $('iframe').attr('src').match(/[^/]*$/)[0];
console.log(loadedVideoURL);
});
});
I've tried to clean up the messy mix of native JS and jQuery and made some edits to your fiddle: https://jsfiddle.net/yurt5bb6/2/
Default function:
(function() {
$.each($('.video-player'), function() {
$(this).append(videoThumb($(this).data('id')));
$(this).on('click', videoIframe);
});
$.each($('iframe'), function() {
// Rebuild the given template
var player = $('<div class="video-player">');
// Strip youtube video id for data-id attribute
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumb(id));
player.on('click', videoIframe);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});
})();
Iframe render function:
function videoIframe() {
var iframe = $('<iframe>');
iframe.attr("src", "//www.youtube.com/embed/" + $(this).attr('data-id') + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.attr("frameborder", "0");
iframe.addClass("youtube-iframe");
$(this).empty();
$(this).append(iframe);
}
Also changed the CSS, made a class instead of id for youtube-iframe.

Resize youtube video (on page and onclick)

I'm trying to use a script in which I feature some tumblr video posts (those tagged with "featured" word) but I have two problems:
1) I don't know how set a size for the videos on the page (ideal 300 width). they are stuck on 400px.
2) I'd like the videos to grow to 1000px width, when people click play.
My tumblr is on cookjs.tumblr.com
can anyone help? thank you so much in advance!
<script>
if ($('p img').length > 0)
$(".textpost").css("overflow","hidden");
var rssurl = '/tagged/{text:Featured Tag}/rss';
$.get(rssurl, function(data) {
var $xml = $(data);
var vari = 0;
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
vari = vari +1;
if(vari <4){
$('.featured-subhead').append('<section class=""><h2>
</h2>
<div class="">' + item.description + '</div><div class="">
Read More</div></section>');
}
});
});
</script>
So the right way of doing this is probably through the YouTube IFrame Player API. You'll be specifically interested in the onStateChange event listener. There's another way that I've done this that you may be interested in; here's the jQuery (since I was new to JS at the time):
$('iframe[src*="youtube.com"]').each(function(){
var videoURL = $(this).attr('src');
var videoID = videoURL.substr(videoURL.length - 11,11);
var thumbURL = 'http://img.youtube.com/vi/' + videoID + '/0.jpg';
$(this).wrap("<div class='video'></div>");
var videoDiv = $(this).parent();
videoDiv.css('background-image', 'url("' + thumbURL + '")').attr('id',videoID);
var heightUnit = $(this).height()*.25;
var widthUnit = $(this).width()*.20;
videoDiv.css('background-position', '0%, -' + heightUnit + 'px');
$(this).remove();
var playButton = $('<img />').attr({
'class': 'button',
'src':'playbutton.png'
}).css({
'width':widthUnit,
'margin-top': '-' + (widthUnit/2)*.783,
'margin-left': '-' + (widthUnit/2)
});
videoDiv.append(playButton);
playButton.on("click",function(){
$(this).css('opacity','0');
var newFrame = $('<iframe />').attr({
'src': 'http://www.youtube.com/embed/' + videoID + '?autoplay=1',
'frameBorder':'0'
});
videoDiv.append(newFrame);
});
});
What this is doing is grabbing the video url from each video on the page, removing the iframe and replacing it with the thumbnail (hosted by YouTube) and a separate clickable button. You can attach any handler you want to the button (even create your own button) but you'll also want to reload a new iframe with the embed url and append ?autoplay=1 to the end, which will start the video.
Here's a demo of this effect; something I coded a few years ago.
you can simply change the iframe height and width by using
function resizeIfrmae()
{
// your ifrmae id or you can pass id via function param
// resizeIfrmae(id) like this
$('#youtube_iframe_id').css('width','150');
$('#youtube_iframe_id').css('height','150');
}
onclick call this function
resizeIfrmae();

How can I check if the href path contain image or someother link using javascript or jquery?

Any One Know Tell me the suggestion to do this. How can i check if the anchor href attribute contain image path or some other path.
For Example:
<img src="image.jpg"/>
<img src="image.jpg"/>
See the above example shows href attribute contain different path like first one is the image and second one is the some other site link. I still confuse with that how can i check if the href path contain the image path or some other path using jquery or javascript.
Any suggestion would be great.
For example (you may need to include other pic formats if needed):
$("a").each(function(i, el) {
var href_value = el.href;
if (/\.(jpg|png|gif)$/.test(href_value)) {
console.log(href_value + " is a pic");
} else {
console.log(href_value + " is not a pic");
}
});
Jquery:
$(document).ready( function() {
var checkhref = $('a').attr('href');
var image_check = checkhref.substr(checkhref.length - 4)
http_tag = "http";
image = [".png",".jpg",".bmp"]
if(checkhref.search("http_tag") >= 0){
alert('Http!');
//Do something
}
if($.inArray(image_check, image) > -1){
alert('Image!');
//Do something
}
});
you may check if image exists or not, without jQuery
Fiddle
var imagesrc = 'http://domain.com/image.jpg';
function checkImage(src) {
var img = new Image();
img.onload = function() {
document.getElementById("iddiv").innerHTML = src +" exists";
};
img.onerror = function() {
document.getElementById("iddiv").innerHTML = src +"does not exists";
};
img.src = src; // fires off loading of image
return src;
}
checkImage(imagesrc);

CKEditor - Change image source

I have made some custom functionality to the CKEditor. In short, it shows a div tag with 5 links, for Small, Medium, Large X-Large and Original size.
When I click the links, it changes the SRC attribute of the image to the correct size.
It works, but it doesn't persist back to the editor. It's like the Image i get through the click event target, is not part of the Source code.
How can I change the Source code, when manipulating with the elements in the editor?
My code looks like this:
$(target).ckeditor(function (editor) {
$(this.document.$).bind("click", function (event) {
var target = $(event.target);
if (target.is("img")) {
var p = $("<div contenteditable='false' class='image-properties'>" + Milkshake.Resources.Text.size + ": <a class='sizeLink' href='#size1Img'>S</a> <a class='sizeLink' href='#size2Img'>M</a> <a class='sizeLink' href='#size3Img'>L</a> <a class='sizeLink' href='#size4Img'>XL</a> <a class='sizeLink' href='#size5Img'>Org.</a></div>");
p.css("top", target.position().top);
var regex = new RegExp(/(size\d{1}img)/i);
var match = regex.exec(target.attr("src"));
if (match != null) {
var imgSrize = match[0];
p.find("a[href=#" + imgSrize + "]").addClass("selected");
}
p.delegate("a", "click", function (e) {
var link = $(e.target);
if (!link.is(".selected")) {
$(".selected", link.parent()).removeClass("selected");
link.addClass("selected");
var imageSrc = target.attr("src");
imageSrc = imageSrc.replace(/(size\d{1}img)/i, link.attr("href").substring(1));
target.attr("src", imageSrc);
target.css("width", "");
target.css("height", "");
}
e.preventDefault();
});
p.insertAfter(target);
} else if (!target.is("div.image-properties")) {
$("div.image-properties", target.parent()).remove();
}
});
The src of images and href of links are protected in CKEditor to avoid browser bugs (when copying, dragging or sometimes even just loading the content), so you must update also this custom attribute:
data-cke-saved-src

Select link right after the one i just clicked

also threw it up on jsbin: http://jsbin.com/ohazo/2
but the code on jsbin is the old code, so overlay_nextimg is overlay_content.click in the javascript on jsbin
Jquery lightbox, grab next link from the one we just clicked, take it's href, fade out the current image, and load in the next img.
Also, how would i go about keeping the overlay_content centered? when changing images, have it animate to the new position? i was gonna tackle that next, but i'm here so why not.
Jquery and Html, i've changed the overlay_content.click that we were using before to overlay_nextimg, to be less confusing.
Jquery:
$(function (){
$('a.lightbox').click(function() {
var imghref = $(this).attr("href");
loadImage(imghref);
alert(imghref)
return false;
});
$('.overlay_nextimg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(nextlink);
loadImage(nextlink);
});
$('.overlay_previmg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(prevlink);
loadImage(prevlink);
});
function loadImage(href, prevlink, nextlink) {
var currentImg = $('.overlay_content img');
var img = new Image();
var docHeight = $(document).height();
$('.overlay_content').delay(300).fadeIn(400);
$(".overlay_bg").height(docHeight).fadeIn(400, function(){
$(img).load(function () {
$(img).hide();
$('.overlay_content').html(img);
$(img).fadeIn('slow');
}).error(function () {
$('.overlay_content').html("you SUCK at Javascript")
}).attr('src', href);
})
}
$('.overlay_bg').click(function (){
$(this).fadeOut(300);
$(".overlay_content").fadeOut(300, function(){
$(this).html('');
});
});
});
HTML:
<div class="overlay_bg"></div>
<div class="overlay_content"></div>
<h1>links</h1>
Load a water color image.
Load a library book, yeah.
from the interweb.
internet image.
HUGE
Please add more of the code/HTML - Is $("overlay_content").click(...) the function you need to fix?
You can use the eq() selector to get the n-th a.lightbox on the page. But obviously you'll need to track what link you're currently on., i.e.
$("a.lightbox:eq(1)")
Or - using the src of the image currently being displayed, find out which link was clicked and move next from there, i.e.
$("a.lightbox[href='" + currentImg.attr("src") + "']").next()

Categories