Nivo Slider not working on Laravel-5 - laravel-5

I followed this guide and loaded everything. Everything so far works, but the background url doesn't seem to work on any css file. I am adding my source code. I've researched about 50 posts, but neither one discuss about how to get this right.
My code. I've tried both (../images and (/images and they don't work.
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
Files are in /images/loading.gif

Add these links into page head
{!! HTML::style('css/default.css') !!}
Copy these files to /css/js and link them to your page:
{!! HTML::script('css/js/jquery.nivo.slider.js') !!}
{!! HTML::script('css/js/jquery.nivo.slider.pack.js') !!}
Then copy this into index page or view :
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="../images/toystory.jpg" data-thumb="../images/toystory.jpg" alt="" />
<img src="../images/up.jpg" data-thumb="../images/up.jpg" alt="" title="This is an example of a caption" />
<img src="../images/walle.jpg" data-thumb="../images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="../images/nemo.jpg" data-thumb="../images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with
a link. </div>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Related

Reveal Image onClick

I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}

getHtml() function in CKEditor not performing as expected

The Project:
I am creating a prototype plugin using CKEditor v4.3.
The plugin loads an iframe of a page I have already created (in the same project). The contents inside the iframe is a necessary part of the project, thus I must use it. Once the plugin loads, I traverse the iframe & get the Body contents of the iframe. After OnOk, I perform getHtml() to get the latest contents and then insertHtml into the editor.
The problem:
The results from getHtml() (see code) is not the same as what is in the dom. The markup is getting changed and removed. All I want is to have the same markup that appears in the dom.
The Code: Here is my plugin code:
var iframeWindow = null;
var theElement = null;
CKEDITOR.plugins.add('airmath',
{
requires: 'iframedialog',
icons: 'airmath',
init: function (editor) {
var height = 480;
var width = 750;
var url = CKEDITOR.basePath + 'plugins/airmath/integration/airmath.html';
CKEDITOR.dialog.addIframe(
'myiframedialogDialog',
'Math Editor',
url, width, height,
function () {
theElement = this.getElement();
iframeWindow = theElement.getFrameDocument().getBody();
},
{
onOk: function () {
editor.insertHtml(iframeWindow.getHtml());
}
}
);
editor.addCommand('myiframedialog', new CKEDITOR.dialogCommand('myiframedialogDialog'));
editor.ui.addButton('AirMath',
{
label: 'Math Editor',
command: 'myiframedialog',
toolbar: 'insert'
});
}
});
The dom:
This is the dom from chrome developer tools:
<span class="MathJax" id="Eq-Editor-Eq-Container-1-1-Frame" role="textbox" aria-readonly="true" style="">
<nobr>
<span class="math" id="MathJax-Span-1" style="width: 15.642em; display: inline-block;">
<span style="display: inline-block; position: relative; width: 7.933em; height: 0px; font-size: 197%;">
<span style="position: absolute; clip: rect(1.461em 1000.002em 2.667em -0.22em); top: -2.314em; left: 0.002em;">
<span class="mrow" id="MathJax-Span-2">
<span class="mstyle" id="MathJax-Span-3">
<span class="mrow" id="MathJax-Span-4">
<span class="texatom" id="MathJax-Span-5">
<span class="mrow" id="MathJax-Span-6">
<span class="mi" id="MathJax-Span-7" style="font-family: MathJax_Math; font-style: italic;">f
<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.065em;">
</span>
</span>
<span class="mfenced" id="MathJax-Span-8">
<span class="mo" id="MathJax-Span-10" style="">
<span style="font-family: MathJax_Main;">(</span>
</span>
<span class="texatom" id="MathJax-Span-11">
<span class="mrow" id="MathJax-Span-12">
<span class="mi" id="MathJax-Span-13" style="font-family: MathJax_Math; font-style: italic;">x</span>
</span>
</span>
<span class="mo" id="MathJax-Span-14" style="">
<span style="font-family: MathJax_Main;">)</span>
</span>
</span>
<span class="mo" id="MathJax-Span-15" style="font-family: MathJax_Main; padding-left: 0.287em;">=</span>
<span class="mn" id="MathJax-Span-16" style="font-family: MathJax_Main; padding-left: 0.287em;">5</span>
<span class="mn" id="MathJax-Span-17" style="font-family: MathJax_Main;">0</span>
<span class="mn" id="MathJax-Span-18" style="font-family: MathJax_Main;">0</span>
<span class="mo" id="MathJax-Span-19" style="font-family: MathJax_Main; padding-left: 0.224em;">×</span>
<span class="mn" id="MathJax-Span-20" style="font-family: MathJax_Main; padding-left: 0.224em;">1</span>
<span class="mo" id="MathJax-Span-21" style="font-family: MathJax_Main;">.</span>
<span class="msup" id="MathJax-Span-22" style="padding-left: 0.16em;">
<span style="display: inline-block; position: relative; width: 0.985em; height: 0px;">
<span style="position: absolute; clip: rect(1.429em 1000.002em 2.286em -0.22em); top: -2.188em; left: 0.002em;">
<span class="mn" id="MathJax-Span-23" style="font-family: MathJax_Main;">2</span>
<span style="display: inline-block; width: 0px; height: 2.191em;">
</span>
</span>
<span style="position: absolute; top: -2.156em; left: 0.509em;">
<span class="mi" id="MathJax-Span-24" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">x</span><span style="display: inline-block; width: 0px; height: 1.747em;">
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span style="display: inline-block; width: 0px; height: 2.318em;">
</span>
</span>
</span>
<span style="border-left-width: 0.003em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 2.128em; vertical-align: -0.559em;">
</span>
</span>
</nobr>
</span>
<script id="Eq-Editor-Eq-Container-1-1" type="math/mml"><math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<mrow class="MJX-TeXAtom-ORD">
<mi>f</mi>
<mfenced open="(" close=")">
<mrow class="MJX-TeXAtom-ORD">
<mi>x</mi>
</mrow>
</mfenced><mo>=</mo>
<mn>5</mn>
<mn>0</mn><mn>0</mn>
<mo>×<!-- × --></mo>
<mn>1</mn>
<mo>.</mo>
<msup>
<mn>2</mn>
<mi>x</mi>
</msup>
</mrow></mstyle>
</math>
</script>
<input type="text" class="hidden" id="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1" name="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1">
The Results:
And this is what I get in the ckEditor window after clicking "Ok" from the dialog window. Viewing in Source mode:
<div class="mje_editor_row" id="Eq-Editor-Eq-Container-1-1-Row">
<span style="font-size:197%">
<em>f</em>
<span style="font-family:mathjax_main">(</span>
<em>x</em>
<span style="font-family:mathjax_main">)</span>
<span style="font-family:mathjax_main">=</span>
<span style="font-family:mathjax_main">5</span>
<span style="font-family:mathjax_main">0</span>
<span style="font-family:mathjax_main">0</span>
<span style="font-family:mathjax_main">×</span>
<span style="font-family:mathjax_main">1</span>
<span style="font-family:mathjax_main">.</span>
<span style="font-family:mathjax_main">2</span>
<em>x</em>
</span>
<input name="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1" type="text" />
What I've done:
Thinking that there could be a timing issue with my iframe page loading, I tried an alert(iframeWindow.getHtml()); at the bottom of the addIframe function(). I was surprised when it gave me exactly the data as shown in the dom. It was just what I wanted. Also, as a further note, (as a user) I did not make any changes to the iframe data once the dialog loaded. I just clicked Ok after waiting for a couple seconds to see that the page is fully loaded. I have poured through http://ckeditor.com/forums for hints I have reviewed http://stackoverflow.com for help. So far the problem eludes me. I haven't found anything-- although it is probably one of those things staring right at me in the face.
If any of you have experience with this issue, I would love to hear how to solve it. Many thanks!
Success is so sweet when you find the answer you have been looking for! I am new to CKEditor plugin programming - so I just didn't know. It has been a rough road. But I got it. Here is the details.
CKEditor came out with this new layer called ACF (Advanced Content Filtering) in version 4.1. Because I wasn't aren't aware of this extra layer, my HTML tags got stripped out when my plugin sent HTML data to the ckEditor window on editor.insertHtml. After I added allowedContent: true to the plugin code (see below), my HTML is no longer stripped out. No more filtering!
Details about allowing specific tags described here.
And finally, here it mentions about adding config.allowedContent = true to disable content filtering -- which I assumed was something to do in the config.js file, but changing the config.js file in this manner didn't have an effect for me.
Here is a copy of the new changed code:
var iframeWindow = null;
var theElement = null;
var height = 480;
var width = 750;
var url = CKEDITOR.basePath + 'plugins/airmath/integration/airmath.html';
CKEDITOR.plugins.add('airmath',
{
requires: 'iframedialog',
icons: 'airmath',
init: function (editor) {
allowedContent: true,
CKEDITOR.dialog.addIframe(
'myiframedialogDialog',
'Math Editor',
url, width, height,
function () {
theElement = this.getElement();
iframeWindow = theElement.getFrameDocument().getBody();
},
{
onOk: function () {
editor.insertHtml(iframeWindow.getHtml());
}
}
);
editor.addCommand('myiframedialog', new CKEDITOR.dialogCommand('myiframedialogDialog'));
editor.ui.addButton('AirMath',
{
label: 'Math Editor',
command: 'myiframedialog',
toolbar: 'insert'
});
}
});

jquery.corner.js plugin, I can't get it to work on images

I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.
However, I want to apply the corners to images. It just won't work for me!
I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.
I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )
Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/
Here is the test page online: http://www.webau.net/TC/example/corner_test.htm
Here is the CSS:
* {
border: 0 none;
}
.content {
width: 900px;
background-color: #fff;
margin: 0 auto;
}
.innertube {
padding: 20px;
}
.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }
.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }
Here is the HTML:
<div class="content">
<div class="innertube">
<br clear="all" />
<br clear="all" />
<img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div>
<div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
Here is the internal Javascript code:
$(document).ready(function(){
$(".roundimg").corner("tl 50px").corner("br 50px");
$(".imgBox").corner("15px");
$('.divToHaveCorners').corner();
});
My external JS references are:
<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>
.
I am assuming that I have left out something really simple.. but I just can't see it.
Any help will be greatly appreciated.
Thanks,
SunnyOz
This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!
<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
$("#imgBoxPlain").corner("15px");
});
</script>
</head>
<body>
<div class="content">
<div class="innertube">
<div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
<div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
</div>
</div>
</body>
</html>

Multiple images per transition in jquery Cycle

I have the following HTML code:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
</ul>
</div>
</section>
And the following js:
$(document).ready(function(){
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next'
})
//$(".form-contact form").validate();
})
This works fine, but it shows just one picture, and if I want to see the following I click next, and if I want to see the previous, I click prev. How can I show more than one picture per transition?
Basically, like this example: scroll, but showing more than one picture per transition...
EDIT: The actual HTML I have when trying to have two pictures in each slide is this one:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<div>
<img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
</div>
<div>
<img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
</div>
</ul>
</div>
</section>
And the CSS is this one:
.gallery .holder{
border-radius: 10px;
position:relative;
padding:4px 0 4px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
position:absolute;
width:47px;
height:83px;
text-indent:-9999px;
overflow:hidden;
top:75px;
z-index:99999;
background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
color:#33638b;
font-size:18px;
line-height:21px;
margin:0 0 1px;
text-align:center;
}
#slider{
padding:0;
width:306px;
margin: 0 auto;
}
#slider li{
list-style:none;
text-align:center;
color:#FFFFFF;
font-size:14px;
line-height:17px;
padding:0px 0 0;
width:306px;
}
#slider img{
position:relative;
}
#slider span{
width:286px;
display:block;
padding:20px 10px;
background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}
What's inside your <!-- picture link !--> blocks?
According to the Cycle documentation (and samples) the markup should be like this:
<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- ... -->
</div>
EDIT:
Two pictures in one transition
var curElement = null;
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
timeout: 0,
after: function(currSlideElement, nextSlideElement, options, forwardFlag)
{
if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#next1").trigger('click');
}
else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#prev1").trigger('click');
}
}
});
EDIT 2
The problem is a #slider style. Set its width to f.e. 620px
#slider{
padding:0;
width:620px;
margin: 0 auto;
}
I'm not sure that the Cycle plug-in will handle that without editing the source.
It looks like this option could be useful though:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
It seems like you should be able to trigger a next or prev click onPrevNextEvent.
Something like this:
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next',
onPrevNextEvent: function(isNext) {
if(isNext) {
$('#link-next').trigger('click');
} else {
$('#link-prev').trigger('click');
}
}
})

jQuery Cycle Plugin - Content not cycling

I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
Here is the html:
<div class="slideshow">
<div id="mainImg-1" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number One.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-2" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Two.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-3" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number three.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-4" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Fout.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
Here is the CSS:
.slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; }
#mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-1 .quote,
#mainImg-2 .quote,
#mainImg-3 .quote,
#mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; }
Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up.
Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html
I would appreciate some help to get this cycling through as it should.
Thanks!
Looking at the source, you're missing several </script> tags.
<script type="text/javascript" src="_scripts/navigation.js"></script>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
<title>Charlotte Bank Mooresville Bank First Trust Bank</title>

Resources