Grow your CSS skills. Land your dream job.

Anything Slider Database ID Link rather than Slide # Link

  • # April 3, 2011 at 4:00 pm

    I’ve been toying with the Anything Slider for use on a personal portfolio site. I’m going to be pulling and populating the slides with information and photos from a database (via PHP/MySQL). I want to be able to hard link specific slides from other pages and other sites (facebook sharing, etc.). The problem I’m seeing is it appears (and maybe I’m wrong), that hard linking to specific slides is done via what slide number it is the progression (slide #1, #2, #3, etc.). Obviously, if I’m pulling from a database that is frequently updated, what is slide #2 initially, maybe slide #3 or #4, etc. depending on the new content being added to the database. In other words, I need to link to a slide based upon the database ID rather than the slide #. Now, I can easily insert the database record ID as a class or id in the ‘li’ tag, but have no idea how to make the javascript tie to the ‘li’ ID rather than the slide #.

    Anyone have a simple mod for this one?

    I should mention, I’m a design side guy. I know my way around PHP just enough to be dangerous, and my knowledge of javascript is pretty much plug and play only (though it’s on the list to learn).

    Thanks,
    Justin

    # April 4, 2011 at 1:54 am

    Hi Justin!

    Actually if you think about it, AnythingSlider is just progressing through the slides that exist inside of it. I don’t know exactly how you are displaying or interacting with the slider but it would help if you described how a the next slide information is obtained.

    Here is the basic idea… if you look at the AnythingSlider demo page, you’ll notice a button to add a slide (appended to the end) and a button to remove slides (the last button). The script that does this could be adaptable to your needs:

    // Add a slide
    var imageNumber = 1;
    $('button.add').click(function(){
    $('#slider1')
    .append('
  • ') // this adds a slide that alternates between two images (demo purposes only)
    .anythingSlider(); // update the slider
    });
    // Remove last slide
    $('button.remove').click(function(){
    if ($('#slider1').data('AnythingSlider').pages > 1) {
    $('#slider1 > li:not(.cloned):last').remove(); // remove last non-cloned slide if you have "infiniteSlides:true" otherwise just use "li:last"
    $('#slider1').anythingSlider(); // update the slider
    }
    });

    If you need specific slides, then maybe include the ID number in the panel when it is added

  • ...
  • For instance, if you want to insert a new slide after a particular slide, use the jQuery “after()” function:

    $('#slider').find('li#1234') // find slide to add new slide after
    .after('
  • ...
  • ') // insert new slide after
    .anythingSlider(); // update the slider

    To delete a particular slide, just target the ID, then remove it:

    $('#slider1').find('li#1234').remove();

    I can help with more specifics when I get a better idea of what you need.

    # April 4, 2011 at 9:45 am

    Mottie,
    Thanks for the reply. Maybe I wasn’t quite clear. I haven’t actually built the page yet for this project, though I’ve experimented with this slider elsewhere. There’s no question about how to add or remove slides, that will all be done automatically with the database query. I’ll use PHP to do query of a MySQL database to pull the proper text and image URL that will be dropped into a repeating ‘li’ tag for however many slides are called for. And yes, as mentioned, I can easily tag the ‘li’ tag with an id=”1234″ pulled from the same dataset.

    The problem comes if I want to create a permanent external link to a specific slide in the set. If records are added to the database between the time that I post a link, say to facebook, and the time that someone else clicks on the link weeks or months later, what used to be slide #1 in the series would now be slide #2 or #3 etc. I need a way to have the permanent link tied to that ‘li’ id rather than the slide number in the series on the page, which will forever be fluid and changing.

    In other words, how do I create a permanent link to a DB driven slide that maybe #2 in the series on one day, and #5 on another or #6 etc. It appears the links are driven by slide # in the series, and not the id tag on the ‘li’.

    Does that make more sense?

    # April 5, 2011 at 2:31 pm

    Hey,

    Sorry I made a mistake in my previous post. You can’t start an ID with a number, so lets say you make the id of each li start with “record”, so you should end up with “record1234″ as an ID. Then the following code will target the correct slide (by finding the slide number of course).

    // dbID is the database ID number
    var dbID = '1234',
    // the actual slider
    slider = $('#slider1'),
    // get the plugin variables
    plugin = slider.data('AnythingSlider'),
    // find target slide - change "#record" to whatever prefix you decide
    // to use for the record ID (leave the "#" in front)
    target = slider.find('#record' + dbID).closest('.panel');

    // navigate to selected slide
    slider.anythingSlider( plugin.$items.index( target ) );
    # April 11, 2011 at 2:14 pm

    So if I’m following this correctly, I’ll be feeding the dbID via a URL variable, then the code you submitted above would find the li with that ID and then point to the corresponding slide number. Where would I insert the above code and do I need to do something further to pull the ID out of the URL string?

    # April 13, 2011 at 4:22 pm

    Hiya!

    Ok, so if your id is in the url, lets say in the “dbid” variable, like this:
    All the script does is look for the slide (the

  • ) with an ID of “record’ + the number.

    So if you have a url that looks something like this:

    http://www.somesite.com?dbid=11111

    Then use this code to get the id from the url:

    /* Returns URL parameter
    * url: http://www.somesite.com?name=hello&id=11111
    * z = gup('name'); // z = hello; s = string, or leave blank to target window location
    * Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
    */
    function gup(n,s){
    n = n.replace(/[[]/,"\[").replace(/[]]/,"\]");
    var p = (new RegExp("[\?&]"+n+"=([^&#]*)")).exec(s || window.location.href);
    return (p===null) ? "" : p[1];
    }

    Add the above function to extract out the id from the url string. Then use the following

    var url = 'http://www.somesite.com?dbid=11111',
    // the actual slider
    slider = $('#slider1'),
    // get the plugin variables
    plugin = slider.data('AnythingSlider'),
    dbid = gup('dbid', url), // dbid is the variable name in the string

    // find target slide - change "#record" to whatever prefix you decide
    // to use for the record ID (leave the "#" in front)
    target = slider.find('#record' + dbID).closest('.panel');

    // navigate to selected slide
    slider.anythingSlider( plugin.$items.index( target ) );
# April 14, 2011 at 8:52 pm

Thanks Mottie, I’ll give it a shot and let you know how it works…

# February 7, 2012 at 11:35 am

Hmm, think I have a very similar question -

I’m hoping to use a mysql database drawn out with php to populate my slider but I have a problem -

The slider will be split into categories with a main/cover slide to introduce the category, then there are an unspecified number of product slides within each category and the number of these will change as more are added/deleted from the mysql database, so I’m guessing the the number of the particular category slide will change also. I want to be able to link to the specific category slides directly but as the number of the category slide will change, I’m not sure how I’d achieve this with something like the following:

// External Link with callback function

$(“#slide-jump”).click(function(){

$(‘#slider2′).anythingSlider(4, function(slider){ /* alert(‘Now on page ‘ + slider.currentPage); */ });

return false;

});

e.g. is there a way I can update the “4″ here dynamically without having to manually count through the slides each time something changes to directly link to it?

I’ve had a look at the solution above – as the value is passed as a querystring does this require a page refresh? I’d like it to be as instantanious as the logic above shown in the demos, really.

Thanks in advance
MK

# February 7, 2012 at 3:41 pm

I think the easiest solution would be to add an ID to your category slides, then you can just target the ID.

$("#cat-1").click(function(){
$('#slider').anythingSlider("#category1", function(slider){
/* alert('Now on page ' + slider.currentPage); */
});
return false;
});

For reference, look under “Targeting an object inside the slide” on this page. And the id can be on the panel itself (i.e. the LI, if you are using UL LI’s in the slider).

# February 16, 2012 at 4:07 am

Awesome, I’ll see how it goes, thanks :)

# March 4, 2013 at 11:47 pm

Hi,
I have a problem somehow the same as discussed above and really be great if someone helps me out.
Actually, I am generating multiple sliders from my MSSql server and the string I am able to generate is

I am writing it to my page dynamically, but somehow the slider dont seem to be working correctly. My problem is something like @mkultron has mentioned, as sliders being separated based on category.

# March 5, 2013 at 12:09 am

Hi @cyberpks!

Well first off, it’s not a good idea to have an ID start with a number – I think it is allowed in HTML5, but from looking at your markup, that doesn’t look like HTML5.

Secondly, I only see one panel in slider 3 and one panel in slider 4. So the slider won’t do anything – no navigation, no arrows – because there is only one slide. Try adding more.

# March 5, 2013 at 12:53 am

@Mottie,

Thanks a lot pal :D, You really saved my day

That suggestion really worked, but if possible can you give me an idea as of how can I make it look the way it looks for more than one panel. I mean if I can generate the next and previous buttons, for a slider that may have a single panel only. That’s because the content generate is dynamic and I can not say how many panels will be added to one slider. And in the above case the navigation buttons are not visible (I know that’s what it is supposed to be doing, but can’t help in that).

Some more help is really appreciated :).

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".