PDA

View Full Version : Text and Image Crawler & FancyBox



ashwini223
07-22-2012, 04:19 AM
I have installed 'Text and Image Crawler'.
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I really like it but I am having a little issue with it.

I have also installed fancybox.js

I think that 'Text and image Crawler', somehow duplicate the images (at least that seems to appear as such to me). I can't work out if it is in the loop, or in my links.

I use this sort of links in my html. All my links use a small thumb images and link to a big image to open in the fancybox. I have 10 links like this.

HTML Code:

<a href="photos/big/image1.jpg" rel="lyteshow[landscape]" ><img src="photos/small/image1-s.jpg" border="0" width="120" height="150" alt=""></a>
I tend to believe there is something in the loop, but this is based on behaviours' observations rather than reading the code as I do not know javascript.

fancybox indicate 20 images, while there is only 10 of my links.
It doesn't matter where I click in the loop, for example image2, or image '12' (repeat of image2), the slide show starts at image2 up and finishes at 20.

If I do not use Crawler, fancybox will count 10 images, and will start at image2 (if click on it) and the slide show finishes at 10.

Please help...

jscheuer1
07-22-2012, 08:02 AM
Yes Crawler does duplicate the images. It makes a copy of the content so that there may be a continuous scrolling.

FancyBox doesn't usually use the:



rel="lyteshow[landscape]"

syntax. Are you sure you're using FancyBox?

Also, FancyBox and other box type scripts often have routines for removing duplicates from galleries. If they don't, often they can be added without too much trouble. Or we could probably use jQuery (if you are using FancyBox or another Box script that uses jQuery) and/or Crawler itself to give a different gallery name to the copied set of images once Crawler has created them.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

ashwini223
07-22-2012, 11:23 AM
This is the website link

http://www.peacockbrand.in/demo/art-execut.html

In this web page, i have used only 8 images in crawler

But when i click the image,in fancy box pop up it shows "16" images

When i click the last 8th image, it jus get repeated til 16th image

I dont want this to happen...

Please help

ashwini223
07-22-2012, 02:50 PM
Please give me a solution soon....

I will be very thankful to you.....

jscheuer1
07-22-2012, 04:32 PM
.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Change this:


<script type="text/javascript" src="js/crawler.js"></script>

to:


<script type="text/javascript" src="js/crawler.js">
// Text and/or Image Crawler Script v1.5 (c)2009-2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// updated: 4/2011 for random order option, more (see below)
// updated 7/2012 for integration with 3rd party initializing scripts
</script>

That said, I think the easiest approach would be to have crawler make a new group when it copies the images and then have crawler initialize the fancybox.

Get rid of all of this:


<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/

$("a#example1").fancybox();

$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});

$("a#example5").fancybox();

$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});

$("a#example7").fancybox({
'titlePosition' : 'inside'
});

$("a#example8").fancybox({
'titlePosition' : 'over'
});

$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox();

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>

You're only using a small part of it. We will bring that part back at the end of this process.

Also, these scripts and styles are all either not used, and/or not found. Remove them:


<!--<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="javascript/lightbox.js"></script>-->

<script type="text/javascript" src="js/effects.js" ></script>
<script type="text/javascript" src="js/builder.js"></script>

<link href="css/lightbox.css" rel="stylesheet" type="text/css" />


<script language="JavaScript" src="js/mm_menu.js" type="text/javascript"></script>

and:


<script src="zoom/javascript/jquery-1.8.js" type="text/javascript"></script>

Also get rid of:


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '700px',
'height': '240px'

},
inc: 40, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 3,
neutral:700,
savedirection: true,
random: false
});
</script>

We will move it and change it.

Use this updated version of crawler.js (right click and 'Save As'):

4559

Now and only now, after you've taken care of all of the rest of these changes, add the highlighted as shown just before the closing </body> tag:


. . . gn="middle" class="footerbg"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="copytxt">STANDARD PRESS (INDIA) PVT. LTD. © 2012 . All Rights Reserved.</td>
<td align="right" valign="middle" class="copytxt">Powered By <a href="http://www.bowandbaan.com/" target="_blank" style=" color:#dfb943;">www.bowandbaan.com</a></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '700px',
'height': '240px'

},
inc: 20, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 3,
neutral: 150,
savedirection: true,
random: false,
initcontent: function(contentarray){
var $ = jQuery;
if(typeof $ !== 'undefined' && typeof $.fn.fancybox === 'function'){
$(contentarray[1]).find('a[rel=example_group]').attr('rel', 'example_group2');
$("a[rel^=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
}
}
});
</script>
</body>
<!-- InstanceEnd --></html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

I know this is a lot to take in. Make sure you don't miss any steps. It is working here in a local markup of your page in Firefox, Chrome and IE. If there are problems or you have any questions, let me know.

ashwini223
07-23-2012, 01:17 AM
Thanks alot..

You helped me in right time...

Thank you soooooooooooooooooooooooooooooooooooooooooooooooo much

brakat
03-14-2013, 07:46 AM
dear in image crawler i have a problem
check this link "http://almoltaqa.com.eg/beta/en/index.html"
i can't add more images than the the crawler round then the images enter on each others

thanks

jscheuer1
03-14-2013, 04:02 PM
Please start a new thread for a new question.

When you do, please give us the address to a page where there is a problem and explain the problem better, including which browser and version, also anything special you have to do to see the problem. I looked at the page from your post, and everything seems to be working fine. So either there is no problem on that page, or it isn't obvious.