|
   |
| Forum moderator: bigblog |
| uCoz Community » For Webmasters » Custom Solutions » slideshow with the last entries from File Catalog (this is for an anime website!) |
| slideshow with the last entries from File Catalog |
Hi! As I said in the thread title, I need a script for a slideshow which shows the image and title(over the image) and perhaps even a short description from the last(5,7,10...n) entries in the File Catalog and I want to put this script on the first page from the File Catalog. this script is just as an informer but it's also showing the image from the last entries, and it's a transition.
I thought that it could be helpful if I just gave you some examples:     In my opinion the first and second are the best but right now I don't really care that much about how it look like. I just want to have one on my website... |
admin3007, you probably saw templates with sliders at http://ucoztemplates.com/ - there are installation guides and a forum where you can ask for help.
I'm not active on the forum anymore. Please contact other forum staff.
|
no. I didn't saw those in some kind of templates. I really had one, and I installed it by myself. I don't know how to install a template. I had an slide like that but it was a little wrong... I mean it had some problems.
my slider was a nivo-slider... you have first to download the slide and to upload all the filles: Download this is the code which must be put at the informer: Code <a href="$ENTRY_URL$"><img src="$IMG_URL1" alt="" data-transition="" title="$TITLE$" /></a> you also have to put this before </head>: Code <link rel="stylesheet" href="/themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/themes/pascal/pascal.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/themes/orman/orman.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/style.css" type="text/css" media="screen" /> and after <body>: Code <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> and then you have to put this where you want to have the slide: Code <div id="slider" class="nivoSlider"> <$MYINF_1$ </div> this is all. it was tested by me but as I sad, it has some problems so I just asked if someone know another one... but if you don't even know what I am talking about then, just don't come here with your reviews, because i don't need them!!! Added (2013-04-14, 9:30 AM) Post edited by admin5358 - Tuesday, 2013-03-05, 7:32 PM
|
Do you want a slider such as this one in this website ? -> http://www.dominion.ucoz.co.uk
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio |
that one is good too, if you can combine or merge it with an informer and it'll show me the last 5-7 entries from the file catalog, and if you can give me some detailed info's about how do I install it. also I wanted to say that I don't need a desciption of the image... I need to show the entry's title instead of the description. I don't really care which slide is or where is it from! I care only to be as large as one of those or as that from the example you gave and to show me the images from the last entries as I said before, without to set the images by myself.
Post edited by admin5358 - Monday, 2013-04-15, 6:08 PM
|
admin5358, Sunny's advice still stands then. It is well outside the duties of forum staff and users to build solutions which are not directly incorporating an element of the system. There are web developers/designers who get payed to partake that form of work. Trust me, when I'm not on here I am one.
What I'd advise you look up is jQuery sliders on Google and read step by step the installation guides for them. Informers are by default pretty well setup to be used within them. You just have to think it out a little bit. Good luck. 
Jack of all trades in development, design, strategy.
Working as a Support Engineer. Been here for 13 years and counting. |
admin5358, As Paradox Said
 It is far beyond the duties of the forum staff to build custom solutions. But since you are so desperate , i might as well give you a hint how they work. This is the script i am using in my dominion website. Code <style type="text/css"> /* Slaider */ #slideshow { position: relative; padding: 0; list-style: none; width: 620px; height: 280px; overflow: hidden; } #slideshow img { border: none; } #slideshow .arrow { width: 42px; height: 50px; display: block; position: absolute; top: 116px; text-indent: -9999px; overflow: hidden; cursor: pointer; } #slideshow .arrowL { background: url(/images/arrowsslide.png) no-repeat; left: 0; } #slideshow .arrowR { background: url(/images/arrowsslide.png) -42px 0px no-repeat; right: 0; } .slideView, .thumbList { margin: 0; padding: 0; list-style: none; } .slideView { height: auto; position: relative; top: 0; left: 0; overflow: hidden; z-index: 0; } .slideView li { width: 100%; height: 280px; float: left; margin: 0; display: inline; } .slideView li a { display: block; width: 100%; height: 100%; } #slideshow .desc { padding: 5px; margin: 0; width: 620px; height: 24px; background: black; position: absolute; bottom: 0; left: 0px; color: white; font-weight: bolder; overflow: hidden; z-index: 6; font-size: 12px; } #slideshow .wrap { background: black; position: absolute; height: 75px; bottom: 0; left: 0px; z-index: 90;} #slideshow .thumbList { overflow: hidden; position: absolute; top: 0px; left: 0px; margin-top: 12px; display:none; } #slideshow .thumbList li { width: 107px; height: 52px; display: inline; margin: 0; float: left; display:none; } #slideshow .thumbList li a { display: block; width: 80px; height: 48px; border: 2px solid black; margin-left: 11px; } #slideshow .thumbList li a:hover { border-color: #f75514; } /* ------- */ </style> <div class="rt-grid-8 rt-alpha"> <div class="flush"> <div class="rt-block"> <div class="module-content"> <div class="module-content2"> <div id="slideshow"> <ul class="slideView"> <li><a href="http://dominion.ucoz.co.uk/"><img src="/Dominionbiglogo.jpg" alt="Dominion, The Ultimate Gaming And Entertainment Website."></a></li> <li><a href="http://dominion.ucoz.co.uk/"><img src="/DEMO/rs2.jpg" alt="the description of image 2"></a></li> <li><a href="http://dominion.ucoz.co.uk/"><img src="/DEMO/rs3.jpg" alt="the description of image 3"></a></li> </ul> </div> <script src="/js/slideView.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#slideshow").slideView({ loop: true }); }); </script> </div> </div> </div> </div> </div> The Slider code is as shown in http://dominion.ucoz.co.uk/ 1 How to change the images in the slider ? Changing the images in the slider is easy once you installed it. all you have to do is change the Links to the images and the description Code <li><a href="http://dominion.ucoz.co.uk/"><img src="/Dominionbiglogo.jpg" alt="Dominion, The Ultimate Gaming And Entertainment Website."></a></li> To Install the slider into your template Make a Global Block from Open CP -> Customize Design -> Global Blocks -> Create -> "DEMO" and in the demo block paste the code at the top-most and save. after that open template design in the "Site Pages" and paste the following code in the [body] Code <!-- DEMO --> $GLOBAL_DEMO$ <!-- /DEMO --> and thats all . Thank you and i hope you learnt something from this explanation. and also using a informer along with the slider needs some editing in hand and some thinking. I'll leave that to you
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio Post edited by Xayaan - Tuesday, 2013-04-16, 7:55 AM
|
well, I'm not very good at editing this stuffs. I only now some HTML and some basic CSS... I want to become a programmer too, but I'm still at High School. yeah it is easy to exchange those links, but I don't want to exchange them in every 5 mins, when I put a new entry... even if I seek for a jquery slider there is no way I could install it and merge it with an informer without some help. And I also don't pay for some stuffs like this because I don't get my money back from my website. I made it free and I want to carry on like this. I think I know how to put the Slider in the pages, I mean I want it only in the Main Page of the file catalog and that's from CP, in the Customize Design too. I think I can install it normally without problems too, still, I don't know how is supposed to use it along an informer.
I already found lots of jquery sliders but none of them has an instruction for using it with ucoz. I won't ask you any other things about the slider, if you can answer me at this question: if my informer is for example: Code $MYINF_11$ and this is the code gave to me by the slider to put it where the slider have to appear: Code <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div> how should I modify the code to merge it with the informer in order to work as I sad before? I swear that this is the last thing I'll ask about this topic if you can give me a properly answer!!! I know that I have to put somehow the informers ID between the div and /div codes but still, I don't know exactly how and where... Please help me with this poor little thing! ..And by the way, sorry for my english! I am from Romania... Post edited by admin5358 - Tuesday, 2013-04-16, 6:08 PM
|
admin5358 Sure , I have made a tutorial for you. Check it out : http://forum.ucoz.com/forum/38-17134-1
It also appears that another user asked the same question -> http://forum.ucoz.com/forum/38-16408-1 Best Regards. My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio Post edited by Xayaan - Wednesday, 2013-04-17, 7:17 AM
|
That's ok, but still, is not what I asked for. Someone else could help me too with a carousel like that. I need a slideshow, with big images like 600x275 or something like that, wich goes one after another not like that! I think I know how to install the slideshow which I want, but still there is a problem with the code I sould put where the slideshow will appear, I mean the last question I asked... I also think there is needed a tutorial for this thing, but not for me, for lots of people who want it. I need only the answer of my last question from yesterday.
Post edited by admin5358 - Wednesday, 2013-04-17, 3:59 PM
|
well, thanks for all of your help and sorry for disturbing all of you. I managed to make it, I mean someone helped me...
Maybe I'll post a tutorial about this... I think it could be easier for others too. this is my website: http://animesage.ucoz.ro and there's my slide! |
| |||
| |||