Jump to content

How to create a slider that takes from a folder and only those images came whose names are stored in the database


aneeb
 Share

Recommended Posts

Hey Everyone! i want to create a slider in which the images come from a specific folder and only those images come whose name are stored in the database.For the names of images i am creating a JSON which prints the names of the images. The JSON is this getphp.php{"userdata":[{"a":"1.gif"},{"a":"2.gif"},{"a":"3.gif"},{"a":"4.jpg"},{"a":"5.gif"},{"a":"6.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"2.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"2.gif"},{"a":"Untitled.jpg"},{"a":"poster 2.jpg"},{"a":"3.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"Untitled.jpg"}]} i also have a slider which i have downloaded from internet and i want that this slider takes these images from a folder "images".I also have attached the slider code. Please help me i am new to this..

jquery-slideshow.html

Link to comment
Share on other sites

I have tried this but it didn't bring any images only a blank slider comes. <script> // Then own code$(function() { // Shorthand for $(document).ready(function() { $.getJSON('getphp.php', function(json) { var images = ''; $.each(json.userdata, function(i, image) { images = images + '<img src="images/' + image.a + '">'; }); $('#slideShow').html(images).gallery({directionNavHide: false}); }); });</script> <div id="gallery"><a href="#" id="slideShow"></a></div>

Link to comment
Share on other sites

i have changed my code a little now, i have hard coded one images and the rest of it are dynamic. The hard coded image comes first then after that all the images comes on the screen, they are not coming one by one into the slider. i am pasting my code here <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JQuery Photo Slider with Semi Transparent Caption</title> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript"> $(document).ready(function() { //Execute the slideShowslideShow(); }); function slideShow() { //Set the opacity of all images to 0$('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity)$('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent$('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 secondssetInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first imagevar current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first imagevar next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image captionvar caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-indexnext.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the current imagecurrent.animate({opacity: 0.0}, 1000).removeClass('show'); //Set the opacity to 0 and height to 1px$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content$('#gallery .content').html(caption); } $(function() { // Shorthand for $(document).ready(function() { $.getJSON('getphp.php', function(json) { var images = ''; $.each(json.userdata, function(i, image) { images = images + '<img src="images/' + image.a + '">'; }); $('#slideShow').html(images).slide1(); }); }); </script> <style type="text/css">body{font-family:arial} .clear {clear:both} #gallery {position:relative;height:360px}#gallery a {float:left;position:absolute;} #gallery a img {border:none;} #gallery a.show {z-index:500} #gallery .caption {z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute;bottom:0;} #gallery .caption .content {margin:5px} #gallery .caption .content h3 {margin:0;padding:0;color:#1DCCEF;} </style></head><body><h1>JQuery Photo Slider with Semi Transparent Caption Tutorial</h1><div id="gallery"> <a href="#" class="show"><img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a><a href="#" id="slideShow" class="slide1"></a><div class="caption"><div class="content"></div></div></div><div class="clear"></div> <br/><br/><div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div> </body></html>

Link to comment
Share on other sites

The way that code is set up to work is that it will loop through all anchor elements inside the gallery element. So you need to end up with a layout like this:

<div id="gallery"><a href="#" class="show"> <img src="images/image1.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a> <a href="#"> <img src="images/image2.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a> <a href="#"> <img src="images/image3.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a> <a href="#"> <img src="images/image4.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a><div class="caption"><div class="content"></div></div> </div>

The way you have it set up, is that you have a single anchor with a class of "slideshow", and you are adding all images to that. It's going to treat the "slideshow" anchor as a single image, it's not going to go through the images inside that. So you need to put each img element inside an anchor, and put all of them inside the "gallery" div.

Link to comment
Share on other sites

Then you're still putting all images into a single anchor. You're probably doing it like this:

<div id="gallery"><a href="#" class="show"><img src="images/image1.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/></a> <a href="#" id="slideshow">  <a href="#">   <img src="images/image2.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>  </a>  <a href="#">   <img src="images/image3.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>  </a>  <a href="#">   <img src="images/image4.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>  </a></a><div class="caption"><div class="content"></div></div> </div>

That only gives 2 images for the slideshow. The first one is the anchor with the class "show", and the second is the anchor with the 3 other images in it. The anchors, not the images, are what the slideshow uses. You need all anchors to be in the same container, do not put all of them inside another anchor or it will be used as a single "image" for the slideshow. You need to add the anchors to the same div that the other anchor is in, not inside another anchor inside that div.

Link to comment
Share on other sites

Thank you sir the images are coming one by one into the slider now, but there is only one problem the heading is not coming and it didn't repeat itself when all the images comes, it stops on the last image..

Edited by aneeb
Link to comment
Share on other sites

I am writing the code like this..

images = images + '<a href="#"><img src="images/' + image.a + '" alt="Flowing Rock" width="580" height="360" title=""  rel="<h3>Flowing Rock</h3> All the latest promotions comes here. "/> </a>';

and in div tag i am doing like this..

<div id="gallery"><div class="caption"><div class="content"></div></div>   </div>

but the heading and caption are not coming..

Link to comment
Share on other sites

First IF! json image code between <?php ?> echo out the json image code in getphp.php

echo '{"userdata":[{"a":"1.gif"},{"a":"2.gif"},{"a":"3.gif"},{"a":"4.jpg"},{"a":"5.gif"},{"a":"6.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"2.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"2.gif"},{"a":"Untitled.jpg"},{"a":"poster 2.jpg"},{"a":"3.gif"},{"a":"Aqua-Regia-Logo.jpg"},{"a":"Untitled.jpg"}]}';

2) Then instead of

$('#slideShow').html(images).slide1();

(I don't know WHY '.slide1() is there for?) use

$('.show').after(images);

which will insert new images AFTER the first 3) this

$(document).ready(function() { //Execute the slideShowslideShow(); });  

Will execute before images have been added, remove this completely and add slideShow(); at end of json script after $('.show').after(images);

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...