Jquery image slider won't work propperly - javascript

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

Related

Exporting multiple images using cropit plugin

I'm using cropit plugin, it's working perfectly but does anybody know how to put multiple image previews and export them correctly without doing multiple functions? Here is the demo for the plugin, and here is the code:
$('#image-cropper').cropit();
// In the demos I'm passing in an imageState option
// so it renders an image by default:
// $('#image-cropper').cropit({ imageState: { src: { imageSrc } } });
// Exporting cropped image
$('.download-btn').click(function() {
var imageData = $('#image-cropper').cropit('export');
window.open(imageData);
});
.cropit-preview {
/* You can specify preview size in CSS */
width: 960px;
height: 540px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This wraps the whole cropper -->
<div id="image-cropper">
<!-- This is where the preview image is displayed -->
<div class="cropit-preview"></div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<input type="range" class="cropit-image-zoom-input" />
<!-- This is where user selects new image -->
<input type="file" class="cropit-image-input" />
<!-- The cropit- classes above are needed
so cropit can identify these elements -->
</div>
<!-- This wraps the whole cropper -->
<div id="image-cropper">
<!-- This is where the preview image is displayed -->
<div class="cropit-preview"></div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<input type="range" class="cropit-image-zoom-input" />
<!-- This is where user selects new image -->
<input type="file" class="cropit-image-input" />
<!-- The cropit- classes above are needed
so cropit can identify these elements -->
</div>

Create slider placeholder to solve anchor issues

I am currently building a site and using the smoothy template located here:
Smoothy Template
If you keep refreshing the site, you'll see the Nivo Slider does not load immediately. This causes all my anchor links to the main page to be thrown off vertically by the same height as the slider images once the Nivo Slider has loaded. I've tried several solutions, such as setting the image height and width manually, and also using a placeholder that fades out once Nivo Slider has loaded, but to no avail.
Here is my code:
<div id="sliderwrapper">
<div id="slider" class="nivoSlider templatemo_slider">
<img src="images/slider/img_1_blank.jpg" width="1050" height="500" alt="slide 1" />
<img src="images/slider/img_2_blank.jpg" width="1050" height="500" alt="slide 2" />
<img src="images/slider/img_3_blank.jpg" width="1050" height="500" alt="slide 3" />
</div>
<div id="preloader" class"nivoSlider templatemo_slider">
<img src="images/preloader.jpg" width="1050" height="500" />
</div>
</div>
And here is my function:
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){ $('#preloader').fadeOut(500);} //Triggers when slider has loaded
});
});

Nivo-Slider plugin not working

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!

slickGoTo wont work during animation

I am building a slider with slick than is 10 sliders. Each one is a slice of a horizontal slide of an image.
If one of them is clicked then they should all slide to the same random index with slickGoTo. However if a slide is currently being animated that one slider finishes it's animation instead of going to the proper slide.
I tried to stop the animation with $('.slick-track').stop(true, true); but that doesn't work.
Any ideas on how I can get slickGoTo to go to the right slide or stop the animation and then call slickGoTo?
HTML
<div class="your-class">
<img src="images/aaron_09.jpg" />
<img src="images/ferrier_09.jpg" />
<img src="images/hassan_09.jpg" />
<img src="images/heimz_09.jpg" />
<img src="images/joe_09.jpg" />
<img src="images/paul_09.jpg" />
<img src="images/savitha_09.jpg" />
<img src="images/vaughn_09.jpg" />
</div>
<div class="your-class">
<img src="images/aaron_10.jpg" />
<img src="images/ferrier_10.jpg" />
<img src="images/hassan_10.jpg" />
<img src="images/heimz_10.jpg" />
<img src="images/joe_10.jpg" />
<img src="images/paul_10.jpg" />
<img src="images/savitha_10.jpg" />
<img src="images/vaughn_10.jpg" />
</div>
JS
$(document).ready(function(){
var slick_settings = {
slidesToShow: 1,
adaptiveHeight: true,
dots: false,
arrows: false,
infinite: true,
speed: 1000
};
var slider_collection = $('.your-class');
var slick_collection = slider_collection.slick(slick_settings);
var slick_collection_length = slick_collection.length -1;// -1 since it is used for indexes
// slide a random slider left or right
function slide() {
var slider_key = Math.floor(Math.random() * slick_collection_length);
var slider = slider_collection[ slider_key ];
// pause on hover
if(slider_collection.filter(function() { return $(this).is(":hover"); }).length){
return;
}
// left or right
if(Math.random() >= 0.5){
$(slider).slick('slickNext');
}
$(slider).slick('slickPrev');
}
setInterval(slide, 2000);
// build a image
$(slider_collection).click(function(e){
var slider_key = Math.floor(Math.random() * slick_collection_length);
$('.slick-track').stop(true, true); // doesnt stop the animation
$(slider_collection).each(function(){
$(this).slick('slickGoTo', slider_key);
});
});
});
I needed to set waitForAnimate: false This option was in the git repos readme and not on the website.
For example:
$('.class').slick('slickGoTo', 2, true);
will not animate
and
$('.class').slick('slickGoTo', 2, false);
will animate
The docs say:
slickGoTo
Arguments : int : slide number, boolean: dont animate
Navigates to a slide by index

Displaying CAML Query Results from SharePoint in a DIV

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
});

Categories

Resources