February 1, 2014

Weebly Tricks#27 - Text and Image Crawler Slideshow

Posted by Domz at 2/01/2014

Weebly Tricks: Text and Image Crawler Slideshow
This is another awesome Weebly trick for photo based websites. Display your photos livelier than normal.  I have been making my demo site better so watch out for more tutorials. What does this slideshow all about? Well it's a series of photos constantly moving or crawling as the title says. When you hover your mouse to the left it will crawl to the right and do the opposite when hovering to the right.You can insert unlimited number of photos and also have the option to control the moving speed. Just like the Book Flipping Slideshow, you just need to adjust the dimension settings for the best result. So what are you waiting for, ready your site and lets do it.








1. We need to download the JS file first by clicking this LINK. You can see the main site of this script, look for the crawler.js, right click on it and choose "save link as".

2. Upload that file to to your template by going to Weebly > Design > Edit HTML/ CSS > Add new file.

3. Look for the <head>, (need help for <head.? click HERE), paste the following code:

<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/crawler.js">

/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

Just change the RED marked text with your website name. Save.

4. Go the page you want to insert this slideshow, drag one "embed code" and paste any of the following:

For TEXT
<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>

The green lines will be your message. You can also adjust the width and background as you desire.

For IMAGES
<div class="marquee" id="mycrawler2">
<img src="http://theweeblytricks.weebly.com/files/theme/11.jpg" /> <img src="http://theweeblytricks.weebly.com/files/theme/12.jpg" /> <img src="http://theweeblytricks.weebly.com/files/theme/13.jpg" /> <img src="http://theweeblytricks.weebly.com/files/theme/14.jpg" /> <img src="http://theweeblytricks.weebly.com/files/theme/15.jpg" /> <img src="http://theweeblytricks.weebly.com/files/theme/16.jpg" /> </div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '300px',
'height': '400px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>

The blue part is your image source/s. You can add more just copy and paste the yellow part and change the image source. For the whole description of this script please visit the demo.

Your done!! Did I miss something?

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top