locked
I want to edit code Javascript and css for Simpleslider product jquery RRS feed

  • Question

  • User910710390 posted

    I want  to edit javascript or css for  images SimpleSlider product

    I use it in toolbox

    dragdrop for basicslider  tools 

    the images is max-width: 700 must max-width:1500;

    how can change it 

    when run firefox right click image  ->inspect element show me this :

    <div style="height: 300px; max-width: 1500px; ;" id="ucSlider_slider"><ul style="height: 300px; width: 100%; display: block;" class="bjqs"><li style="height: 300px; width: 100%; display: list-item;" class="bjqs-slide"><img style="height: 300px; width: 100%;" title="" src="Images/ParallaxContentSlider/1.jpg"></li><li style="height: 300px; width: 100%; display: none;" class="bjqs-slide"><img style="height: 300px; width: 100%;" title="" src="Images/ParallaxContentSlider/2.jpg"></li></ul><ul class="bjqs-controls v-centered"><li class="bjqs-prev"><a style="top: 43.3333%;" href="#" data-direction="previous">Prev</a></li><li class="bjqs-next"><a style="top: 43.3333%;" href="#" data-direction="forward">Next</a></li></ul><ol style="left: 0px;" class="bjqs-markers h-centered"><li class="active-marker"><a href="#">1</a></li><li class=""><a href="#">2</a></li></ol></div>
    javascript
     var jqucSlider_slider  =  jQuery.noConflict(true);jqucSlider_slider(document).ready(function() {jqucSlider_slider('#ucSlider_slider').bjqs({'height' : 300,'width' : 700,'animduration' : 450,'animspeed' : 4000,'automatic' : true,'showcontrols' : true,'centercontrols' : true,'nexttext' : 'Next','prevtext' : 'Prev','showmarkers' : true,'centermarkers' : true,'keyboardnav' : true,'hoverpause' : true,'usecaptions' : true,'randomstart' : true,'responsive' : true,'animtype' : 'fade'});});

    I research for id and class css but not find it 

    how can change this in my code ,the site http://codecanyon.net/item/simpleslidersnet-jquery-sliders-in-aspnet/full_screen_preview/5222359  tell me this: JavaScript and Css files are already embeded in library.

    please help me
     

    Wednesday, January 8, 2014 2:52 AM

Answers

  • User-1818759697 posted

    Hi,

     var jqucSlider_slider  =  jQuery.noConflict(true);jqucSlider_slider(document).ready(function() {jqucSlider_slider('#ucSlider_slider').bjqs({'height' : 300,'width' : 700,'animduration' : 450,'animspeed' : 4000,'automatic' : true,'showcontrols' : true,'centercontrols' : true,'nexttext' : 'Next','prevtext' : 'Prev','showmarkers' : true,'centermarkers' : true,'keyboardnav' : true,'hoverpause' : true,'usecaptions' : true,'randomstart' : true,'responsive' : true,'animtype' : 'fade'});});

    You could set the image height through the javascript, "'height' : 300,'width' : 700", change the width 700 to 1500.

    Below is a somple example for this, which you could refer to:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="Testing.WebForm8" %>
    
    <!DOCTYPE html>
    
    <html>
      <head>
        <meta charset="utf-8">
      
        <title>Basic jQuery Slider - Demo</title>
          
        <!-- bjqs.css contains the *essential* css needed for the slider to work -->
        <link rel="stylesheet" href="CSS/bjqs.css">
    
        <!-- some pretty fonts for this demo page - not required for the slider -->
        <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'> 
    
        <!-- demo.css contains additional styles used to set up this demo page - not required for the slider --> 
        <link rel="stylesheet" href="CSS/demo.css">
    
        <!-- load jQuery and the plugin -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="js/bjqs-1.3.min.js"></script>
          
      </head>
      
      <body>
      
        <div id="container">
      
          <h2>Fade Example</h2>
    
          <!--  Outer wrapper for presentation only, this can be anything you like -->
          <div id="banner-fade">
    
            <!-- start Basic Jquery Slider -->
            <ul class="bjqs">
              <li><img src="images/cancel.png" title="Automatically generated caption"></li>
              <li><img src="images/Chrysanthemum.jpg" title="Automatically generated caption"></li>
              <li><img src="images/Date Calendar.gif" title="Automatically generated caption"></li>
            </ul>
            <!-- end Basic jQuery Slider -->
    
          </div>
          <!-- End outer wrapper -->
    
          <script class="secret-source">
              jQuery(document).ready(function ($) {
    
                  $('#banner-fade').bjqs({
                      height: 160,
                      width: 310,
                      responsive: true
                  });
    
              });
          </script>
    
          <h2>Slide Example</h2>
    
          <!--  Outer wrapper for presentation only, this can be anything you like -->
          <div id="banner-slide">
    
            <!-- start Basic Jquery Slider -->
            <ul class="bjqs">
              <li><a href=""><img src="images/Desert.jpg" title="Automatically generated caption"></a></li>
              <li><img src="images/Hydrangeas.jpg" title="Automatically generated caption"></li>
              <li><img src="images/Jellyfish.jpg" title="Automatically generated caption"></li>
            </ul>
            <!-- end Basic jQuery Slider -->
    
          </div>
          <!-- End outer wrapper -->
          
          <!-- attach the plug-in to the slider parent element and adjust the settings as required -->
          <script class="secret-source">
              jQuery(document).ready(function ($) {
    
                  $('#banner-slide').bjqs({
                      animtype: 'slide',
                      height: 320,
                      width: 320,
                      responsive: true,
                      randomstart: true
                  });
    
              });
          </script>
    
        </div>
    
        <!-- 
          The following script is not related to basic jQuery Slider 
          It's used to create the code snippets in the demo.
          https://github.com/maelstrom/SecretSource
        -->
        <script src="js/libs/jquery.secret-source.min.js"></script>
    
        <script>
            jQuery(function ($) {
    
                $('.secret-source').secretSource({
                    includeTag: false
                });
    
            });
        </script>
    
      </body>
    </html>
    

    You could also download the project below:

    https://codeload.github.com/jcobb/basic-jquery-slider/legacy.zip/master

    Within the above project document, you could also get the corresponding  js file or css file for testing.

    Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 10, 2014 1:35 AM