Hi guys,
I need your help to try an figure out something. I have a custom made image slider on my index page but it wont work together with the "wall" I have on the same page.
The slider seems to work only when the wall mod is taken out from the page but I really want to have both on index page and I need your help to figure out why.
I searched the market for a slider but no one sells it and since i'm not a programmer I don't know how to download one and implement it on my site.
Does anyone have an idea how to get both wall + image slider to work on index page?
Thank you.
Sometimes communicating your problem and putting it out there is enough to solve it |
Sometimes communicating your problem and putting it out there is enough to solve it |
Are you using standard boonex wall or spywall mod from the market? |
Are you using standard boonex wall or spywall mod from the market?
I'm using IBDW spy wall.
The wall works fine. I think I just need to adjust the slider somehow.
Sometimes communicating your problem and putting it out there is enough to solve it |
What is your JS (Java Script) that you inserted for image slider?
Image slider works when your Not logged in and doesn't work when logged in (when wall appears)?
|
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery); Sometimes communicating your problem and putting it out there is enough to solve it |
That's the HTML:
<script src="/templates/tmpl_turquoise/gallery/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/templates/tmpl_turquoise/gallery/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="/templates/tmpl_turquoise/gallery/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 774,
panel_height: 300,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
});
});
// ]]></script>
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel"><img src="/templates/base/example_images/wide/1.jpg" alt="1" /></div>
<div class="panel"><img src="/templates/base/example_images/wide/2.jpg" alt="2" /></div>
<div class="panel"><img src="/templates/base/example_images/wide/3.jpg" alt="3" /></div>
<div class="panel"><img src="/templates/base/example_images/wide/4.jpg" alt="4" /></div>
<div class="panel"><img src="/templates/base/example_images/wide/5.jpg" alt="5" /></div>
</div>
</div>
Sometimes communicating your problem and putting it out there is enough to solve it |
Try changing with this and clear cache and public_cache manually leaving any .htaccess files
<script type="text/javascript">var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#photos').galleryView({
panel_width: 774,
panel_height: 300,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
});
});
</script>
Let me know if that works for you..
|
Thanks, but it didn't work.
The result was that all 5 images were added to my index with no slider and also my RSS feeds didn't work.
Any other idea?
Sometimes communicating your problem and putting it out there is enough to solve it |
Ok.. What's your site url?
You can try this instead;
<script type="text/javascript">jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#photos').galleryView({
panel_width: 774,
panel_height: 300,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
});
});
</script>
Might have to contact image slider developer or IBDW to resolve conflict.
|
Also, are inserting all in admin/settings-->basic or directly into page_1.html |
Same result.
I will try to contact dolphin_jay again the developer and see if he can do something with this. I know he tried but maybe he could give it another shot.
I appreciate you help rhimpr.
Thank you!!!
Sometimes communicating your problem and putting it out there is enough to solve it |
