jQuery S3Slider with BlogEngine.NET

Apr 1, 2009 at 8:36 PM
Hi!!
  I would like to know if someone have tried to include in BlogEngine.NET's page the jQuery s3slider plugin (http://www.serie3.info/s3slider/) .

Thanks a lot..

Alessandro
Apr 2, 2009 at 6:36 AM
I'm not sure if you have the same issue but I tried including one just now but had no luck.  Nothing shows up on my screen at all.

If I find a solution to my problem, I'll post it here.

-Goalie35
Apr 2, 2009 at 8:58 AM
Hi Goalie35 !!

 I've your exact problem.... Nothing shows up...

I will do the same if I find a solution... ;)

Alessandro
Coordinator
Apr 2, 2009 at 7:42 PM
Are either of you currently using a dev version of BlogEngine from the source code tab?  I haven't tested this, but I believe jQuery works much better in the current source than it did in the 1.4.5 release.
Apr 3, 2009 at 4:25 AM
I finally was able to get mine working.  I placed the following code into the top portion of my page: 

<

 

script type="text/javascript" src="js.axd?path=Scripts/jquery.js"></script>

 

 

<script type="text/javascript" src="js.axd?path=Scripts/s3Slider.js"></script>

 

 

<script type="text/javascript">

 

jQuery.noConflict();

jQuery(document).ready(

function() {

 

jQuery(

'#slider').s3Slider({

 

timeOut: 3000

});

});

 

</script>

After this, I simply inserted my remaining content within my div tag (<div id=slider>...), and it all worked fine.


-Goalie35

 

Apr 3, 2009 at 2:17 PM
Thanks Goalie35 !!

Now it works!!

Thanks a lot

Alessandro
May 22, 2009 at 11:50 AM

Hey guys.

 

I am trying to implement a jquery piece myself, but having no luck either. Getting some script error on the page.    Just curious exactly where did you place your code.

I've done, create new post.  switched to html source editor,  then put the below in.  But all i get is a script error on the page. And I'm not sure if i'm doing this 100% correct.  Any help is appreciated in debugging.  HOpefully something sall.

 

<script src="/scripts/jquery.fancybox/jquery.js" type="text/javascript"></script>
<script src="/scripts/jquery.fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="/scripts/jquery.fancybox/jquery.easing.js" type="text/javascript"></script>
<link rel="stylesheet" href="/scripts/jquery.fancybox/fancybox.css" type="text/css" media="screen">

 <script type="text/javascript">

$(document).ready(

function() {

 /* This is basic - uses default settings */
 
 $("a#single_image").fancybox();
 
 /* Using custom settings */
 
 $("a#inline").fancybox({
  'hideOnContentClick': true
 });

 $("a.group").fancybox({
  'zoomSpeedIn':  300,
  'zoomSpeedOut': 300,
  'overlayShow':  false
 });
});

</script>

<a id="single_image" href="/images/ImageLarge.png">
<img src="/images/imageSmall.png" alt="" width="163" height="110" /></a>

Thanks.

May 22, 2009 at 4:28 PM

Hi Kprice!

   I don't know if this could help you, but all what I do is to put in the <head> tag the jquery's libreries that i'm going to use, then I suggest to use the jQuery.noConflict () function before the $(document).ready, another things is not to use the $(document) (expecially if u have not installed the latest version on BlogEngine.NET) but use the $var(document) to recall the jquery's functions and last USE THE src="js.axd?path=js/JQUERYLIBARY.JS" to recall the jquery function in BlogEngine .

 <head runat="server" profile="http://gmpg.org/xfn/11">
<%--      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js.axd?path=js/ui.core.js"></script>
    <script type="text/javascript" src="js.axd?path=js/ui.tabs.js"></script> --%>
   
<!--script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script-->

    <script type="text/javascript" src="js.axd?path=js/jquery.js" ></script> 

    <script type="text/javascript" src="js.axd?path=js/s3Slider.js" ></script> 
   <script type="text/javascript" src="js.axd?path=js/jquery.jqtransform.min.js" ></script> 


    <script type="text/javascript"> 
        $j=jQuery.noConflict();     
        $j(document).ready(function() {
        $j('#slider').s3Slider({
            timeOut: 3000
        });
        $j("form.body").jqTransform();
       
        //$j("#tabs").tabs();

    });

    </script> 

   
</head>
<body>
<form id="Form1" runat="Server" class="body">
<div id="head" class="clearfloat">
    <div class="clearfloat">

.........

 

I hope this will help you ;) . Let me know !!

Alex