1. Slide Show in Datalife Engine

Slide Show in Datalife Engine

  |   48
Slide Show in Datalife EngineDatalife Engine has the best customizable feature in term of theme or template customize and control, and many websites want to make their websites look fancy and look like professional design, in modern web designs there are lot of features that can help webmaster customize their websites, slider or slide show is one of those features, slider or slide show is the short and focus spot for visitors to take a look first because it's the top picks, feature list or recommendation in the website. In this topic I will show you different slider/slide show to help you customize your website, each section has the files that I made with example for you to use and customize for your website, so simply download the files and follow the "readme.html" to install and ready to use...if you have any issue or questions, please feel free to ask, also if you have any slider/slide show in mind, and want me to add in this tutorial, please post the url to the slider/slide show so that I can add it in the list...I will cover as many as I can in this topic...

DLE Slider with Popular News

Feature Slide Show using Custom Page


Slide Show in Datalife Engine
This is simple slide show using module "Custom" page tag, this slide is very simple to use custom tag to display the articles from different categories of your choice, this slide is good for feature list from specific categories, some time when you add articles to one of your categories, for example, "movies" category but want this article to show in feature list no other articles from this category to show, so you decided to create extra category, for example, "feature" films category, so you add this article as extra category which mean this article is added to "movies" and "feature" categories, now you can set the slide show to grab the posts from "feature" category automatically...so that how this slide works...

This slide show is using : jQuery Feature
Demo: http://themes.dlestarter.com/featureslide.html
(Please change theme to "AStarter" only to see slideshow)
Login Required!Only registered users can download files. Please register or Login

More coming...stay tune...I am not done yet!

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.

Details

+10

Comments 48

jopaulmj
jopaulmj
V.I.P.
Commented By jopaulmj on January 12, 2012 (8:51 am)
2 Questions how to change width of this slide show in main page
how this slide show take popular news ,where i have to give
5 26Forum topics : 0Forum replies : 0Forum likes : 0
Ammir
Ammir
Members
Commented By Ammir on January 12, 2012 (11:23 am)
im install it but news image not show . im used movie template . and used [xfvalue_poster] . i have change code <img src="{image}" to <img src="[xfvalue_poster]" but still not show image . please help
N/A 38Forum topics : 4Forum replies : 43Forum likes : 0
tealk
tealk
Moderators
Commented By tealk on January 12, 2012 (1:10 pm)
Yep same question here ^^ ...
28 56Forum topics : 9Forum replies : 329Forum likes : 36

SGcenter Streaming FR
sunzeal1221
Commented By sunzeal1221 on January 12, 2012 (7:06 pm)
http://nh4.upanh.com/b6.s13.d5/f26a5298806731c55d61a076b6b29ffe_39922294.untitled.png

why?
N/A 4Forum topics : 0Forum replies : 0Forum likes : 0
spamhater
spamhater
DLE TEAM
Commented By spamhater on January 12, 2012 (7:43 pm)
jopaulmj, tealk, sorry for not being clear on everything...

The slider is using jQuery jCarousel http://sorgalla.com/jcarousel/

So everything is controlled by CSS file,
{THEME}/js/jcarousel/skins/tango/skin.css
I have made some comments in the css file for which one for changes

@ Ammir, sunzeal1221, it maybe because the Popular News module is using cache,
You can try to clear smartcache in DLE Admin CP

Or you can try to disable cache by open file /engine/modules/newstarter.php
Find:
if ($config['allow_cache'] != "yes") { $config['allow_cache'] = "yes"; $is_change = true;}
Replace with:
if ($config['allow_cache'] != "no") { $config['allow_cache'] = "no"; $is_change = true;}
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
tealk
tealk
Moderators
Commented By tealk on January 12, 2012 (10:13 pm)
Thx Spamhater but my question is the same to Ammir for the xvalue part ^^
28 56Forum topics : 9Forum replies : 329Forum likes : 36

SGcenter Streaming FR
dbrasii
dbrasii
V.I.P.
Commented By dbrasii on January 12, 2012 (11:02 pm)
Nice mod, but a other question, is it possible to use the tooltip only with the custom tag?
1 5Forum topics : 4Forum replies : 28Forum likes : 1
spamhater
spamhater
DLE TEAM
Commented By spamhater on January 12, 2012 (11:27 pm)
tealk, for that part, make sure you read the module instruction...because the file was used the module theme, unless you see images when you use module but can't see images with slider...

dbrasii, if you see the instruction, you will see the code for tooltip javascript
$(document).ready(function(){$("a").easyTooltip()});
This mean all tags in html that use a title="xxxxx" will use the tooltips...if you want want this tooltip, I can show the different tooltips like the one we are using with download buttons in this website for you...check with every "Download Now!" button, you will see the popup tooltips..if you want that then yes you can use it only with custom tag you want...otherwise the tooltips that I included was using a title html tag...

I still have more slide features coming...so I changed the title of this topic because tbenmcp told me to make this topic all about slide show, so I will make as many as possible, so that's why I have asked you guys that if you know any good slideshow or jquery scroller, just post here so I can use it as tutorial for you guys...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
tealk
tealk
Moderators
Commented By tealk on January 13, 2012 (1:18 am)
Thank you Spamhater , it's working ...
28 56Forum topics : 9Forum replies : 329Forum likes : 36

SGcenter Streaming FR
Ammir
Ammir
Members
Commented By Ammir on January 13, 2012 (8:12 am)
tealk how u fix it . im try to disable cache
in /engine/modules/newstarter.php but still not worked . my site . moviedirfree.com.
N/A 38Forum topics : 4Forum replies : 43Forum likes : 0
spamhater
spamhater
DLE TEAM
Commented By spamhater on January 13, 2012 (6:22 pm)
Quote: tealk
Is it a way to reduce the space under the slider ??
The space is not from slider, it's from your theme
<a title="" style="height: 632px;" href="#" class="title-link"><span class="title-link-films"></span></a>
You set style to height 632px...

Quote: Ammir
tealk how u fix it . im try to disable cache
in /engine/modules/newstarter.php but still not worked . my site . moviedirfree.com.
See my comment: #comm-id-671
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
Ammir
Ammir
Members
Commented By Ammir on January 13, 2012 (7:44 pm)
ya got it . thank you it worked now.

1 other question:
i want to used 1 more slide but only for 1 category
Example :
we have category : English Movies
i want to show Latest English Movies in second slide only which we new added... on site it is possible ?
N/A 38Forum topics : 4Forum replies : 43Forum likes : 0
spamhater
spamhater
DLE TEAM
Commented By spamhater on January 13, 2012 (9:28 pm)
Quote: Ammir
on site it is possible ?

Of course anything is possible...
Replace:
jQuery('#mycarousel').jcarousel({
With:
jQuery('.first-and-second-carousel').jcarousel({
Now replace:
<ul id="mycarousel" class="jcarousel-skin-tango">
  {newstarter}
  </ul>
With:
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
  {newstarter}
  </ul>

That's your first slider...now we will build second one, since you are xfield for images and want specific category to show in second slide, this make it very simple, you can simply use custom page...so let's start with custom file.

Create tpl file and save it as for example: slider2.tpl, place this code in slider2.tpl
<li id="panel_{news-id}">
    <a title="<center>{title}<br /><img style='border: 1px solid #999999' src='[xfvalue_poster]' width='200' alt='' /></center> <br />Views: {views} | Comments: {comments-num}" href="{full-link}">
        <img src="[xfvalue_poster]" alt="" border="0" class="slideitem" />
      </a>
</li>
Now in main.tpl put the second slide you want it to display
<ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-tango">
  {custom category="9" template="slider2" aviable="global" from="0" limit="20" cache="no"}
  </ul>
Simple modify the code:
- category="9" is your category ID
- template="slider2" is the name of your slider2.tpl (without .tpl extension)
- limit="20" is how many of articles to be shown

More info about custom page, please visit Basic Main tag and page displays
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
Ammir
Ammir
Members
Commented By Ammir on January 14, 2012 (6:22 am)
thanks . done ........
N/A 38Forum topics : 4Forum replies : 43Forum likes : 0
tealk
tealk
Moderators
Commented By tealk on January 14, 2012 (9:08 am)
Done too ... Thanks again for the great support and module dude ^^ !!!
28 56Forum topics : 9Forum replies : 329Forum likes : 36

SGcenter Streaming FR
pitzuboy
pitzuboy
Members
Commented By pitzuboy on February 29, 2012 (5:16 am)
How to make this work for popular news ? Most viewed news ? Thank you
N/A 2Forum topics : 2Forum replies : 4Forum likes : 0
sawanbanna
sawanbanna
DLE TEAM
Commented By sawanbanna on February 29, 2012 (1:01 pm)
pitzuboy, the slideshow is showing topnews, if you want to add "most read" you must customize the the module that used with the slideshow, there is instruction to sort the news in "Popular News (DLEStarter)" you can customize it there.
31 409Forum topics : 23Forum replies : 979Forum likes : 150

« Live as if you were to die tomorrow. Learn as if you were to live forever! »
pitzuboy
pitzuboy
Members
Commented By pitzuboy on March 1, 2012 (4:23 am)
in newstarter.php is set "ORDER BY news_read " but don't order that. Thank you
N/A 2Forum topics : 2Forum replies : 4Forum likes : 0
sawanbanna
sawanbanna
DLE TEAM
Commented By sawanbanna on March 1, 2012 (8:52 pm)
pitzuboy,
I just tested it, working fine on my end...don't see any problems
31 409Forum topics : 23Forum replies : 979Forum likes : 150

« Live as if you were to die tomorrow. Learn as if you were to live forever! »
snovop
snovop
Members
Commented By snovop on March 2, 2012 (9:37 am)
Hello, I installed the slideshow on my site, when I pass the pointer over it, I would like the category is displayed in place of the author.

How?

thank you
N/A 10Forum topics : 4Forum replies : 7Forum likes : 0
spamhater
spamhater
DLE TEAM
Commented By spamhater on March 2, 2012 (2:49 pm)
snovop, which slide show you are using? the first one or second one?

if you are using first one that use newstarter, then the module don't support category yet, we are working on the new release, however, you can use default topnews.tpl instead of newstarter, at the time spamhater wrote this tutorial we didn't support 9.5 and topnews didn't support xfield until 9.5, so you can use newstarter.tpl to use with slideshow which will support all dle standard tags...

let us know if anything you need for assistance on customize it...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
snovop
snovop
Members
Commented By snovop on March 2, 2012 (5:45 pm)
hello, thanks fellow
N/A 10Forum topics : 4Forum replies : 7Forum likes : 0
Gozan
Gozan
V.I.P.
Commented By Gozan on March 28, 2012 (9:09 pm)
thanks spamhater it works fine for 9.5


1. how to resize slider width?

2. how to specify category in first slider?
33 132Forum topics : 20Forum replies : 88Forum likes : 7
spamhater
spamhater
DLE TEAM
Commented By spamhater on March 29, 2012 (4:15 am)
Gozan,
1) the slider box is controlled by css in theme file {THEME}/js/jcarousel/skins/tango/skin.css, set 2 sections of width size
/* this set for slide box*/
and
/* this set for slide box inside the item not include the arrow and it should be the same size as slide box above*/
Both width value should be the same...

2) To use slider for specific category, use custom page...please use "slider2.tpl" method in tutorial above
simply create slider2.tpl and replace "{newstarter}" with {custom ==== } as in tutorial

let me know if you don't understand steps...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
Gozan
Gozan
V.I.P.
Commented By Gozan on March 29, 2012 (7:30 am)
good job spiderman lol
thanks ur time and great hack bravo


33 132Forum topics : 20Forum replies : 88Forum likes : 7
thanmanhan
thanmanhan
Members
Commented By thanmanhan on July 9, 2012 (6:13 am)
i installed the slideshow on my site, but it slide don't worked!
http://no2.upanh.com/b1.s26.d1/e87c005f717353b970c82d0d510505ef_47038222.slidererror.gif
N/A 1Forum topics : 0Forum replies : 0Forum likes : 0
sawanbanna
sawanbanna
DLE TEAM
Commented By sawanbanna on July 9, 2012 (12:07 pm)
thanmanhan,
the "DLE Slider with Popular News" require Popular News to be installed...

Please download it here Popular News

But this slideshow doesn't cover Popular News V.2, I will update this post as soon as I can, but it still work with it, all you need is change the tag by follow the instruction for upgrade with the module, download V.2 here:
Popular News V.2

So either version will work with this slider with no problem.
31 409Forum topics : 23Forum replies : 979Forum likes : 150

« Live as if you were to die tomorrow. Learn as if you were to live forever! »
kevinhd
kevinhd
V.I.P.
Commented By kevinhd on November 14, 2012 (2:28 am)
hello, because you can not see the images of the slider? thanks
N/A 18Forum topics : 6Forum replies : 10Forum likes : 0
noobos
noobos
DLE TEAM
Commented By noobos on November 14, 2012 (3:58 pm)
kevinhd,
if you can't see images then make sure you check your image tag if it's using regular image tag or xfield, see the module document you use instead of this tutorial
16 302Forum topics : 12Forum replies : 1036Forum likes : 170
bizon01
bizon01
Members
Commented By bizon01 on January 14, 2013 (1:15 pm)
9.7 O.K. dance ................................:) !!!
N/A 1Forum topics : 0Forum replies : 0Forum likes : 0
Information!Would you like to leave your comment? Please Login to your account to leave comments. Don't have an account? You can create a free account now.