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

aneeb · July 20, 2012

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

aneeb · July 20, 2012

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>

justsomeguy · July 20, 2012

Are there any Javascript errors in the console when you run that? Does the gallery show the correct number of images but not the images themselves?

aneeb · July 20, 2012

This error comes in the error console Error: $("#gallery .content").html($("#gallery a:first").find("img").attr("rel")).animate is not a functionSource File: http://localhost:8080/mano/slideshow/jquery-slideshow.htmlLine: 32

aneeb · July 20, 2012

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>

justsomeguy · July 20, 2012

All of the images are going into the same anchor element, they each need their own.

aneeb · July 21, 2012

So how can i correct it ??Please tell me i am new to this

justsomeguy · July 23, 2012

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.

aneeb · July 24, 2012

But all of the images are coming from database so how can i put each image into a separate anchor tag ?

thescientist · July 24, 2012

use a loop

aneeb · July 24, 2012

can you tell me how to write it please...

dsonesuk · July 24, 2012

Just use the each() loop you are already using, and add the anchor element to encircle the img tag you are creating

images = images + '<a href="#"><img src="images/' + image.a + '"></a>';

aneeb · July 25, 2012

I have done this changing in the code it is bringing the images into the slider but it brings all the images at once.

Edited July 25, 2012 by aneeb

justsomeguy · July 25, 2012

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.

aneeb · July 25, 2012

Like this ??

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

Edited July 25, 2012 by aneeb

justsomeguy · July 25, 2012

Like I showed in post 8. All anchor tags need to be children of the "gallery" div. I don't see a reason to have the "slideshow" element there, the code that runs the gallery doesn't use an element with that ID.

aneeb · July 25, 2012

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 July 25, 2012 by aneeb

justsomeguy · July 25, 2012

It expects the "caption" div to be at the end, that's how it knows to loop back to the beginning.

aneeb · July 26, 2012

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..

justsomeguy · July 26, 2012

It looks like it's set up right, assuming you're adding that image string to be the first content in the gallery div, before the caption. Make sure you're checking your browser's error console for Javascript errors.

aneeb · July 26, 2012

Nope no errors in error console..

dsonesuk · July 27, 2012

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 July 27, 2012 by dsonesuk

aneeb · July 31, 2012

Done, thank you sir thanks for your help, i appreciate it very much..

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in