Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
javascript, forms, how to organise
Hi, I want to implement this at my site and can’t work it how to do it in txp –
http://jsfiddle.net/Zbbbv/2994/
I don’t know how to use the javascript. I made a form then tried inserting the form where I wanted the display – didn’t work.
Then I tried experimenting in other ways – inserting it here, there, etc – none of it worked.
All the code is there – but as a txp amateur I don’t know how to implement it.
Thanks :-)
Offline
Re: javascript, forms, how to organise
Hi James,
You need to add the different parts shown in the different windows of the fiddle to different places.
1. Put this where you want it to appear in your page template for the respective page (presumably the video page):
<div id="player"></div>This is just a placeholder for where the video carrousel should go.
2. Append the css to the end of the default css in textpattern (presentation tab > css > default)
#player {
width: 580px;
height: 280px;
overflow: hidden;
background: white;
position: relative;
border: solid 2px gray;
padding: 5px;
}
.youtube .carousel {
width: 230px;
height: 100%;
overflow: auto;
position: absolute;
right: 0px;
z-index: 3;
}
.youtube .thumbnail {
margin: 2px;
width: 100px;
border: 1px solid black;
}
.youtube iframe.player {
width: 338px;
height: 278px;
overflow: auto;
border: 0;
}
.yt-descript {
color: #000;
display:block;
height:100px;
}
.carItemContain{
width:;
height:100px;
}3. Finally for the javascript, you first need to load jquery, then wrap the script you have in an onload/ready instance so that it’s called only once the page has been fully loaded. That’s what the settings in the drop-down on the left-hand column in the jsfiddle do for you automatically.
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
/*
Copyright 2011 : Simone Gianni <simoneg@apache.org>
-- update by tcuttrissweb --
adds in title beside thumbs in carousel.
adjusted css from the original to make room
for this allows resizing to adjust size of the
player adjust the css for:
.youtube iframe.player width / height accordingly.
Released under The Apache License 2.0
http://www.apache.org/licenses/LICENSE-2.0
*/
function createPlayer(jqe, video, options) {
var ifr = $('iframe', jqe);
if (ifr.length === 0) {
ifr = $('<iframe scrolling="no">');
ifr.addClass('player');
}
var src = 'http://www.youtube.com/embed/' + video.id;
if (options.playopts) {
src += '?';
for (var k in options.playopts) {
src += k + '=' + options.playopts[k] + '&';
}
src += '_a=b';
}
ifr.attr('src', src);
jqe.append(ifr);
}
function createCarousel(jqe, videos, options) {
var car = $('div.carousel', jqe);
if (car.length === 0) {
car = $('<div>');
car.addClass('carousel');
jqe.append(car);
}
$.each(videos, function(i, video) {
options.thumbnail(car, video, options);
});
}
function createThumbnail(jqe, video, options) {
var imgurl = video.thumbnails[0].url;
var img = $('img[src="' + imgurl + '"]');
var desc;
var container;
if (img.length !== 0) return;
img = $('<img align="left">');
img.addClass('thumbnail');
jqe.append(img);
img.attr('src', imgurl);
img.attr('title', video.title);
img.click(function() {
options.player(options.maindiv, video, $.extend(true, {}, options, {
playopts: {
autoplay: 1
}
}));
});
desk = $('<p class="yt-descript">' + video.title + '</p>');
jqe.append(desk);
desk.click(function() {
options.player(options.maindiv, video, $.extend(true, {}, options, {
playopts: {
autoplay: 1
}
}));
});
}
var defoptions = {
autoplay: false,
user: null,
carousel: createCarousel,
player: createPlayer,
thumbnail: createThumbnail,
loaded: function() {},
playopts: {
autoplay: 0,
egm: 1,
autohide: 1,
fs: 1,
showinfo: 1
}
};
$.fn.extend({
youTubeChannel: function(options) {
var md = $(this);
md.addClass('youtube');
md.addClass('youtube-channel');
var allopts = $.extend(true, {}, defoptions, options);
allopts.maindiv = md;
$.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
var feed = data.feed;
var videos = [];
$.each(feed.entry, function(i, entry) {
var video = {
title: entry.title.$t,
id: entry.id.$t.match('[^/]*$'),
thumbnails: entry.media$group.media$thumbnail
};
videos.push(video);
});
allopts.allvideos = videos;
allopts.carousel(md, videos, allopts);
allopts.player(md, videos[0], allopts);
allopts.loaded(videos, allopts);
});
}
});
// initiate player
$('#player').youTubeChannel({
user: 'kamerar'
});
)};
</script> Now this is where I no longer remember how your page was set up:
- Either you insert this code before the final
</html>tag at the end of your page template … - Or there is already a pre-prepared form for inserting javascript to your page template. If that is so, you’ll see
<txp:output_form name="xyz" />somewhere near the end of your page template. Findxyz(it will, of course, be called something else) in the Presentation Tab > Forms and append the above code to that.
Good Luck!
TXP Builders – finely-crafted code, design and txp
Offline
Re: javascript, forms, how to organise
Thanks. I would never have known you have to add the initial jQuery code because the web site doesn’t tell you that. The rest is pretty straightforward but it’s not working. I have no idea why.
Offline
Pages: 1