So what I'm trying to do, is display some content from a SharePoint list in a div with some custom classes. The first script is using the jquery plugins from Awkward Showcase
So, my CAML query works. I have the function called in the div tag, because I want to display it as the thumbnail caption, however, it seems that it overwrites everything on the page and processes last.
So all my div tags and content are gone and it only writes the results of the function on the page.
Here is my code:
<script type="text/javascript">
`$(document).ready(function()'
{
$("#showcase").awShowcase(
{
content_width: 700,
content_height: 470,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
<script type="text/javascript">
function GetNews(){
/*Get News*/
$().SPServices({
operation: "GetListItems",
webURL: 'http://weburl.com',
async: false,
listName: "Posts",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Primary' /><FieldRef Name='Pic' /><FieldRef Name='Short_x0020_Description' /></ViewFields>",
CAMLRowLimit: "10",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='Primary'/><Value Type='choice'>1</Value></Eq></Where></Query>",
completefunc: function (xData, Status) {
//alert("Status of XML message reaching Sharepoint webservice: " + Status);
//alert("Response from server: " + xData.responseText);
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var name = ($(this).attr("ows_Title"));
document.write(name);
});
}
}); //Close getNews
}
</script>
<body>
<div style="width: 700px; margin: auto;">
<div id="showcase" class="showcase">
<!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<!-- The image below needs to be from the variable above pictureUrl -->
<img src="images/01.jpg" alt="01" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
<!-- The image below needs to be from the variable above pictureUrl -->
<img src="images/01.jpg" alt="01" width="140px" />
<!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. This needs to be the variable 'name' from above -->
<div class="showcase-thumbnail-caption"><div><script type="text/javascript">GetNews()</script></div></div>
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the caption content in a div with the class .showcase-caption. This needs to be the variable 'postDesc' from above -->
<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>
</div>
</div>
</div>
</body>
well its probably not working correctly because you are writing it directly not to the document and not to a specific div
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var name = ($(this).attr("ows_Title"));
document.write(name);//this line needs a fix maybe $('#divID').append('<h1>'+name+'<h1>') for eg
});
Related
Hello I'm using this plug in :https://github.com/elclanrs/jq-tiles
for creating an image slider in header of my website. I'm using Asp.net MVC.
unfortunately the slider wont work as like as demo. instead of showing one row and one column it shows the slider in 2 columns and x rows (x is the number of images i use in my slider.
this is my index cshtml code :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/jquery.tiles.min.css" rel="stylesheet" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="~/Scripts/jquery.tiles.js"></script>
<div class="slider">
<img src="~/Content/img/img01.jpg" /> <!-- No description -->
<img src="~/Content/img/img02.jpg" /> <!-- No description -->
<img src="~/Content/img/img03.jpg" /> <!-- No description -->
<img src="~/Content/img/img04.jpg" /> <!-- No description -->
<img src="~/Content/img/img05.jpg" /> <!-- No description -->
<img src="~/Content/img/img06.jpg" /> <!-- No description -->
<img src="~/Content/img/img07.jpg" /> <!-- No description -->
<img src="~/Content/img/img08.jpg" /> <!-- No description -->
<img src="~/Content/img/img09.jpg" /> <!-- No description -->
<img src="~/Content/img/img10.jpg" /> <!-- No description -->
</div>
<script>
$('.slider').tilesSlider({
x: 15, // # of tiles in x axis, 20 max
y: 10, // # of tiles in y axis, 20 max
effect: 'simple',
fade: false, // fade images in addition to the tiles effect
random: true, // animate tiles in random order
reverse: false, // start animation from opposite direction
backReverse: false, // reverse the animation when going back in the slideshow (useful for some effects)
rewind: false, // reverse animation at a certain percentage in time
auto: true, // Start the slideshow on load
loop: true, // Start slideshow again when it finishes
slideSpeed: 3500, // time between slides
tileSpeed: 800, // time to clear all tiles
cssSpeed: 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
nav: false, // Add navigation
navWrap: null, // Add the navigation to an existing element
bullets: false, // Show bullets, if false the show pagination with numbers
thumbs: false, // Show thumbnails when hovering nav
thumbSize: 25, // Thumbnail size (percentage of the original image)
timer: false // show or hide the timer bar
});
</script>
The animation and transitions works just fine the only problem is the repeating of image as shown in figure:
Try to set carousel item wrapper style as background-repeat: no-repeat
How do I crop my selected picture?
I've written web page that gives the user a choice to replace their current picture with a picture inside a carousel.
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="Pictures/PhotoAlbum/90.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
</div>
</div>
When I click on the images in the carousel the ZoomAvatarPicture is replaced, as I expect it. I want to crop the newly selected ZoomAvatarPicture image. I've tried 3rd party cropping software (e.g. jQuery rcrop and imgAreaSelect) but their cropped images are of the original image, 203.jpg)
This is the code I added for rcrop:
jQuery(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
preserveAspectRatio: true,
minSize: [50, 50],
inputsPrefix: '',
grid: false,
});
$('#ZoomAvatarPicture').on('rcrop-changed', function e() {
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
})
});
And then I had a div to hold the cropped image
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
Since I got the same results for rcrop and imageSelect it leads me to believe that the problem isn't in the software but in my understanding of what can be done in jQuery.
Also, the demo page for rcrop is here: http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/
I've added this code
function rcrop_Avatar()
{
var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
alert('src = ' + $('#ZoomAvatarPicture').attr('src') );
}
function resetListener()
{
$('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
rcrop_Avatar();
}
jQuery(document).ready(function () {
App.init();
App.initScrollBar();
Datepicker.initDatepicker();
OwlCarousel.initOwlCarousel();
CirclesMaster.initCirclesMaster1();
StyleSwitcher.initStyleSwitcher();
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
$('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});
and modified the HTML to this:
<div class="item">
<img src="Pictures/PhotoAlbum/Work/90.jpg" onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>
I'm still getting the same results. (i.e. the cropped image is the original image, not the newly selected one).
The entire process is in a bootstrap modal. I'm starting to think I should forgo this route and put everything into a tabbed series of iframes.
Apparently, rcrop doesn't like to change properties or subject on the fly, and the destroy method is pretty messy, as it sometimes deletes the original object or leaves the preview display behind.
So, to avoid that, I changed a bit the behaviour to delete the remains and then recreate the image and attach it to the rcrop again.
Due to the size limit of the answers and not being able to upload the js and css of rcrop, i made this Codepen: http://codepen.io/LordNeo/pen/XpxVVv
Here is the relevant parts so you can check for modifications, for working example see the above CodePen.
$(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
});
function changeImage(imgsrc) {
$('#ZoomAvatarPicture').rcrop("destroy");
$('#ZoomAvatarPicture').remove();
$('.rcrop-preview-wrapper').remove();
$('.rcrop-wrapper').prepend('<img id="ZoomAvatarPicture" src="'+imgsrc+'" height="200" />');
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
}
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG1" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4')"/>
</div>
</div>
The plugin doesnt seem to be working for me on this project im working on, whenever i load the page to view the slider the transitions aren't working, i've looked at the file paths for the references to the javascript files and css files and they are correct.
I'll post the code below if anyone could help that'd be great!
Jquery:
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function () { }, // Triggers before a slide transition
afterChange: function () { }, // Triggers after a slide transition
slideshowEnd: function () { }, // Triggers after all slides have been shown
lastSlide: function () { }, // Triggers when last slide is shown
afterLoad: function () { } // Triggers when slider has loaded
});
});
File Refs:
<script src="assets/Nivo-Slider-master/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="assets/Nivo-Slider-master/nivoslider.jquery.json"></script>
<link rel="stylesheet" href="/assets/Nivo-Slider-master/nivo-slider.css" type="text/css" media="screen" />
Example Slider code of mine:
<div id="slider" class="nivoSlider" >
<uc1:ImageCarouselll runat="server" ID="ctrl_Images" />
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display: none;">
<div class="slides" style="width: 138240px;"></div>
<h3 class="title">Image from Unsplash</h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</asp:Content>
The control code is as follows:
<asp:Repeater ID="rptPhotos" runat="server">
<ItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</AlternatingItemTemplate>
</asp:Repeater>
Any help is greatly appreciated! Thanks!
I am trying to display a video player inside a modal window in Liferay 6.2 through Alloy UI, with no luck. I have a simple portlet with the following structure in view.jsp:
<div id="myToggler">
<button class="header toggler-header-collapsed">Show Video</button>
<p class="content toggler-content-collapsed">
<div id="myVideo"></div>
</p>
</div>
In the main JavaScript file, main.js, the toggler is loaded into the #myToggler layer, and the video is loaded into the #myVideo layer, which is, in fact, inside the toggler. The video is not loaded into the toggler, though.
YUI ( ).use (
'aui-toggler',
'aui-video',
function (Y) {
new Y.TogglerDelegate ({
animated: true,
closeAllOnExpand: true,
container: '#myToggler',
content: '.content',
header: '.header',
transition: {
duration: .5,
easing: 'cubic-bezier'
}
}).render ( );
new Y.Video ({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render ( );
}
);
So, how can I load the video inside the toggler? Or, for that matter, how can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?
When I run your code I get:
Uncaught TypeError: undefined is not a function
This is due to the fact that, TogglerDelegate does not have a render() method. Also, you should not put a div into a p element. Instead, just make the toggler content into a div. See below for a runnable example:
YUI ( ).use (
'aui-toggler',
'aui-video',
function (Y) {
new Y.TogglerDelegate ({
animated: true,
closeAllOnExpand: true,
container: '#myToggler',
content: '.content',
header: '.header',
transition: {
duration: .5,
easing: 'cubic-bezier'
}
});
new Y.Video ({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render ( );
}
);
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div id="myToggler">
<button class="header toggler-header-collapsed">Show Video</button>
<div class="content toggler-content-collapsed">
<div id="myVideo"></div>
</div>
</div>
[H]ow can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?
One way to do this is to specify the outer widget's boundingBox and contentBox, and place the inner widget inside the contentBox of the outer widget. See below for a runnable example:
YUI().use('aui-modal', 'aui-video', function(Y) {
new Y.Modal({
boundingBox: '#bb',
contentBox: '#cb',
headerContent: 'Modal header'
}).render();
new Y.Video({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render();
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<div id="bb">
<div id="cb" style="background-color: grey;">
<div id="myVideo">
</div>
</div>
</div>
</div>
I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.
Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>